Tengo un componente de reacción que se parece a esto. Utiliza internamente highcharts-react para representar un gráfico al obtener datos de una API al proporcionarle a la API algunas de sus propiedades de estado.
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 + '¶m2=' + 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 } }Esto funciona perfectamente bien siempre que el componente sea estático, es decir, una vez que se establecen los parámetros durante el renderizado inicial, el control principal nunca lo actualizará. Además, este enfoque es el mismo que se proporciona aquí: https://daveceddia.com/ajax-requests-in-react/
Sin embargo, mi requisito es que el control principal pueda actualizar los accesorios param1 y param2 de este control, lo que hace que realice una nueva llamada ajax con estos valores y vuelva a representar el gráfico con nuevos datos.
¿Cómo abordar esto?
Sus soluciones representan el gráfico solo cuando el componente se ha montado
componentDidMount() { this.renderChart(); } Mientras que el requisito es volver a representar el gráfico una vez param1 y param2 . Para eso podríamos usar componentWillReceiveProps , donde comparará valores y actuará en consecuencia
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(); } }Además, mantenga su función componentDidMount, porque
React no llama a componentWillReceiveProps con accesorios iniciales durante el montaje.
Como alternativa, podría usar componentDidUpdate con un enfoque similar.