ReactコンポーネントからのAJAXリクエスト

Question

私はこれに似た反応コンポーネントを持っています。これは内部的にハイチャートを使用します。これは、APIに状態プロパティの一部を提供して、APIからデータを取得してチャートをレンダリングします。

export default class CandlestickChart extends React.Component { 
    constructor (props) { 
     super(props); 
     this.state = { 
      apiParam1: this.props.propData.param1, 
      apiParam2: this.props.propData.param2, 
      chartConfig: this.getChartConfig(this.props.apiParam1), 
     }; 
    } 

    componentDidMount() { 
     this.renderChart(); 
    } 

    render() { 
     return (
      <div className='col-lg-6'> 
       <div className='well'> 
        <ReactHighStock config={this.state.chartConfig} /> 
       </div> 
      </div> 
     ); 
    } 

    renderChart() { 
     var that = this; 
     NanoAjax.ajax({ 
      url: 'myApi.com?param1=' + this.state.apiParam1 + '&param2=' + this.state.apiParam2; 
     }, function (statusCode, responseText) { 
      //transform the data a bit 

      var chartConfig = that.getChartConfig(that.state.apiParam1); 
      chartConfig.series[0].data = chartData; 

      that.setState({ 
       chartConfig: chartConfig 
      }) 
     }); 
    } 

    getChartConfig(param1) { 
     // returns HighCharts chartConfig object based on apiParam1 
    } 
} 

これは限りコンポーネントが静的であるとして完全に正常に動作し、paramsをレンダリングする初期時に設定されると、すなわち、親コントロールはそれを更新することはありません。ここに与えられたとしても、このアプローチは同じです：https://daveceddia.com/ajax-requests-in-react/

しかし、私の要件は、親コントロールは、これらの値と再新鮮なAJAX呼び出しを作るために、それを引き起こして、小道具param1と、このコントロールのparam2を更新できる、ということですチャートを新しいデータでレンダリングします。

これにアプローチする方法は？

Answer 1

あなたのソリューションは、要件がparam1とparam2変更すると、グラフを再描画することであるがコンポーネントが

componentDidMount() { 
    this.renderChart(); 
} 

マウントされているだけでチャートを描画します。そのために我々はあなたが値を比較し、

は、実装時の初期小道具とcomponentWillReceivePropsを呼び出すことはありません反応するため、あなたのcomponentDidMount機能を維持し、また、それに応じて

componentWillReceiveProps(nextProps) { 
    let shouldRerenderChart = false; 

    shouldRerenderChart = shouldRerenderChart || this.props.propData.param1 !== nextProps.propData.param1; 

    shouldRerenderChart = shouldRerenderChart || this.props.propData.param2 !== nextProps.propData.param2; 

    if (shouldRerenderChart) { 
    this.renderChart(); 
    } 
} 

を行動するだろうcomponentWillReceivePropsを、使用することができますあなたが同様のアプローチでcomponentDidUpdateを使用することができます別の方法として

---

。