は、私は部品の構造を持っている私のリアクトアプリでは、第一の方法トリガ

Question

後の状態を変更する反応しませんメソッドはAllElementsコンポーネントから呼び出されます。 AllElementsの私の状態（名前）の問題は、最初のonClickトリガの後に変更されず、2回目のクリック後に変更されます。私の理由を教えてください。

class AllElements extends Component { 

     constructor(props) { 
      super(props); 
      this.state = { 
       myData: [], 
       viewingElement: { 
        name:"" 
       } 
      } 
      this.see = this.see.bind(this); 
      console.log('Initial Sate',this.state.viewingElement); 
     } 


     see(name) { 
     this.setState({ 
      viewingElement: { 
      name:name 
      } 
     }); 
     console.log('State after SEE',this.state.viewingElement); 
     } 

     render() { 
      const { myData, viewingElement } = this.state; 
     return (
      <div> 
      {myData.map(se => (
       <SingleElement 
       key={se.id} 
       name={se.name} 
       see={this.see} 
       /> 
      ))} 
       <SingleElementDetails viewingElement={viewingElement}/> 
      </div> 
     ); 
     } 
    } 



    class SingleElement extends Component { 
    constructor(props) { 
     super(props); 
    } 

    seefunc(name) { 
     this.props.see(this.props.name); 
     console.log('Name in seefunc props',this.props.name); 
    } 

    render() { 
     return (
      <div onClick={this.seefunc.bind(this)}> 
       DIV CONTENT 
      </div> 
     ) 
    } 
} 

Answer 1

ここで問題があるのは、setStateが非同期であることです。最初に動作しますが、console.logは状態が更新される前に発生するため、console.logには表示されません。

this.setState({ 
      viewingElement: { 
      name:name 
      } 
     },() => { 
    console.log('State after SEE',this.state.viewingElement); 
}); 

そしてSingleElementに更新小道具を見るためにライフサイクルを反応からcomponentWillReceiveProps(nextprops)（https://reactjs.org/docs/react-component.html#componentwillreceiveprops）メソッドを使用する：更新された状態は、コールバック関数（https://reactjs.org/docs/react-component.html#setstate）であるsetStateの第2引数を使用し参照する

。

seefunc(name) { 
     this.props.see(this.props.name); 
    } 

componentWillReceiveProps(nextprops) { 
     console.log('Name in props',nextProps.name); 
} 

Answer 2

が変更されます。しかし、setStateはayncプロセスなので、以前の状態だけをコンソールに記録しています。 setStatedoes provide a callbackあなたが行うことができますので、非同期処理が終了した後、あなたがコードを実行することができます：

this.setState({ 
    viewingElement: { 
    name:name 
    } 
},() => console.log('State after SEE',this.state.viewingElement)); 

DEMO