componentWillReceiveProps子では、親のsetState（）で受信しません

Question

"Calory"子コンポーネントをHighCharts実装でレンダリングする "App"という名前のReactに親コンポーネントがあります。

Reactライフサイクルに従って、親は子コンポーネントをレンダリングしてから、componentDidMount（）を呼び出します。私はフェッチを使用して非同期データを取得し、一度それを行ったsetStateは、ユーザーオブジェクトを持つ親です。それから、子コンポーネントをuser = {this.state.user}で再レンダリングし、子コンポーネントで使用できるようになります。しかし、私はthis.propsを子のコンポーネントのWakeReceivePropsに記録すると、ユーザーオブジェクトは存在しません。だから、「未定義」子コンポーネントのログでこの行：

componentWillReceiveProps: function(){ 
    const series = this.props.series; 

    console.log("component Will Receive Props") 
    console.log(this.props); 
} 

ここでは、私の完全なコードは次のとおりです。

const App = React.createClass({ 
//parent component to render all elements and hold state 
    getInitialState(){ 
     return{ 
      user: {}, 
      series: [{ 
       name: 'Jane', 
       data: [1, 0, 4] 
      }, { 
       name: 'John', 
       data: [5, 7, 3] 
      }] 
     }; 
    }, 

    componentDidMount: function(){ 

     const fb_id = location.pathname.replace("https://stackoverflow.com/users/",""); 

     fetch("https://someurl.com/usersdata/" + fb_id) 
     .then(rsp => rsp.json()) 
     .then(json => { 
      if(json.error && json.error.message){ 
       throw new Error(json.error.message); 
      } 
      this.setState({user:json},()=>{ 
       console.log("state updated"); 
       console.log(this.state); 
      }); 
     }); 

    }, 

    render: function(){ 
     return (
      <div className="container"> 
       <div clasNames="row"> 
        <div className="col-xs-12"> 
         {/*Send this.state.user data from fetch to child component*/} 
         <Calories series={this.state.series} user={this.state.user}/> 
        </div> 
       </div> 
       <div className="row"> 
        <div className="col-xs-7"> 
         <div className="bottom-left" id="weight-line-chart"> 
          <Weight/> 
         </div> 
        </div> 
        <div className="col-xs-5"> 
         <div className="bottom-right" id="avg-calories-pie-chart"> 
          <AverageCal/> 
         </div> 
        </div> 
       </div> 
     </div> 
     ); 
    } 

}); 

//Calories Line chart 
const Calories = React.createClass({ 

    componentDidMount: function(){ 

     const series = this.props.series; 

     console.log("component Did Mount"); 
     console.log(this.props); 

     $(function() { 
      const myChart = Highcharts.chart('calories-line-chart', { 
      chart: { 
       type: 'line' 
      }, 
      title: { 
       text: 'Your Calories Over Time' 
      }, 
      xAxis: { 
       categories: ['Apples', 'Bananas', 'Oranges'] 
      }, 
      yAxis: { 
       title: { 
        text: 'Fruit eaten' 
       } 
      }, 
      series: series 
      }); 
     }); 

    }, 

    componentWillReceiveProps: function(){ 

     const series = this.props.series; 

     console.log("component Will Receive Props") 
     console.log(this.props); 

     $(function() { 
      const myChart = Highcharts.chart('calories-line-chart', { 
      chart: { 
       type: 'line' 
      }, 
      title: { 
       text: 'Your Calories Over Time' 
      }, 
      xAxis: { 
       categories: ['Apples', 'Bananas', 'Oranges'] 
      }, 
      yAxis: { 
       title: { 
        text: 'Fruit eaten' 
       } 
      }, 
      series: series 
      }); 
     }); 

    }, 

    render:function(){ 
     return(
      <div> 
       <h3>Calories Intake</h3> 
       <div className="top" id="calories-line-chart"> 

       </div> 
      </div> 
     ); 
    } 
}); 

誰もが私が間違っているの何私を助けることができますか？ componentWillReceiveProps意志内部

componentWillReceiveProps: function(newProps){ //here 
    console.log("component Will Receive Props", newProps); //it will log the new values 
    ... 
} 

this.props：

Answer 1

componentWillReceivePropsは（親コンポーネント内部の）子供のprops値が更新されますとき、あなたはこのように、このlifecycle方法、パラメータとして新しい値を受信する必要が呼び出されます以前の値があり、このlifecycleメソッドの後に更新されます。 console.log(this.props)をrenderに入れると、更新された値が表示されます。

なぜ新しい値をパラメータとして受け取る必要があるのですか？

私は関係なく、その子コンポーネントに関連しているかどうかの、私たちは親コンポーネントでsetStateを行うたび理由は（わからない）、このメソッドが呼び出されると思うので、私たちはすべてのタスクを実行する前に、いくつかのロジックを配置する必要があり子供の場合（新しい小道具と古い小道具は同じかどうか）、そのためにthis.propsはこのメソッド内に古い値を持ちます。

componentWillReceivePropsの詳細は、DOCを参照してください。