Question

我的反应组件看起来像这样。它在内部使用highcharts-react来通过向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
    }
}

只要组件是静态的，即只要在初始渲染期间设置了参数，父控件就永远不会更新它。此外，此方法与此处给出的方法相同：https://daveceddia.com/ajax-requests-in-react/

但是，我的要求是，父控件可以更新此控件的道具param1和param2，导致它使用这些值进行新的ajax调用，并使用这些值重新渲染图表新数据。

如何处理？

Answer 1

您的解决方案仅在已安装组件时呈现图表

componentDidMount() {
  this.renderChart();
}

虽然要求在param1和param2更改后重新呈现图表。为此，我们可以使用componentWillReceiveProps，您将比较值并采取相应的行动

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();
  }
}

另外，请保留componentDidMount函数，因为

在安装过程中，React不会使用初始道具调用componentWillReceiveProps。

作为替代方案，您可以使用类似方法的componentDidUpdate。

来自React组件的AJAX请求

1 个答案: