状態が更新される前に関数を呼び出し、親コンポーネント/ React.jsにデータを渡します。

Question

私はユーザーがリストとその中のアイテムを作成できる簡単な反応アプリケーションを作っています。私は子供から親コンポーネントにデータを渡して状態を更新する方法を見つけるのに苦労しています。

子コンポーネント（AddItem）の入力データを親コンポーネント（App）に渡します。

//AddItem.js

class AddItem extends Component { 

    constructor() { 
    super(); 
    this.state = { 
     items: [] 
    } 
    } 

    handleSubmit(e) { 
     e.preventDefault(); 

     var newItem = { 
     name : this.refs.id.value}; 

     if(this.refs.id.value ===''){ 
      alert('Add list') 
     } else { 
      this.setState({ 
      items: this.state.items.concat(newItem) 
      }, function(){ 
      this.props.addItem(this.state.items); 
     }); 
     console.log(this.state.items) // this print out Array with data 
    } 
    } 
    render() { 
    var divName = 'add' + this.props.idName; 
    return (
    <div className='addItemDiv'> 
     <h4>Add {this.props.idName}</h4> 
     <form ref='form' onSubmit={this.handleSubmit.bind(this)}> 
     <div id={divName} ref={divName}> 
      <label>Name</label><br /> 
      <input type='text' ref='id' /> 
     </div> 
     <br /> 
     <input type='submit' value='Submit' /> 
     <br /> 
     </form> 
    </div> 
    ); 
    } 

    } 

// App.js

class App extends Component { 

constructor() { 
    super(); 
    this.state = { 
     lists: [], 
     items: {} 
    }; 
    } 

handleAddList(list) { 
     let lists = this.state.lists; 
     lists.push(list); 
     this.setState({ 
      lists: lists 
     }) 
} 

handleAddItem(item) { 
    console.log(this.state.items) // it print out {}. Data is not passed. 
    } 
render() { 
    return (
    <div className="App"> 

    <AddList addList={this.handleAddList.bind(this)} /> 
    <div id="listsDiv" className="List"> 
    <Lists lists={this.state.lists} items={this.state.items} addItem={this.handleAddItem.bind(this)} /> 
    </div> 
    </div> 
    ); 
    } 

    } 

私がコメントとして追加として、AddItem.jsでthis.state.itemsは、配列データが含まれていますが、私は親コンポーネントにそれを渡されたときApp.jsのthis.state.itemsは空です。私は、その関数がAddItem.jsで正しく呼び出されず、データがApp.jsに渡されないことを疑う。

しかし、私は自分でそれを理解することはできません。あなたの親切な助けに感謝します。

は

handleAddList(list) { 
     let lists = this.state.lists; 
     lists.push(list); 
     this.setState(prevState => ({ 
      ...prevState, 
      lists: lists 
     })); 
} 

Answer 1

の一覧を表示します含ま

Answer 2

機能はあなたのリストと状態を上書きhandleAddList、ありがとう、私はそれを実行したときに、あなたのコード内で2つの問題が見つかりました。

注：：リストコンポーネントをコメントアウトしました。

{/*<div id="listsDiv" className="List">*/} 
    {/*<Lists lists={this.state.lists} items={this.state.items} addItem={this.handleAddItem.bind(this)} />*/} 
{/*</div>*/} 

（1）コンポーネントAddItemに「addItem」という小道具を渡していません。

<AddList addList={this.handleAddList.bind(this)} addItem={this.handleAddItem.bind(this)}/> 

（2）ハンドル項目が間違ったフィールドを記録しています。

handleAddItem(items) { 
    console.log(items); 
    } 

ここで、私は値がAppまでバブリングされているのを見ることができます。

おかげ スリラムNarasimhan