Я строю визуализацию данных, где мне нужно передать данные из API в компонент диаграммы. Компонент диаграммы загружается нормально в первый раз, но при последующих попытках диаграмма не загружается без каких-либо ошибок. Я подозреваю, что это проблема с обновлениями состояний в компоненте диаграммы. После отладки я обнаружил, что состояние не обновляется периодически, из-за чего диаграмма не загружается. Вот как выглядит код
HomePage. js
async componentDidMount() {
await this.getDataFromApi(); //Gets data for the charts
await this.prepareDataForChart(); //Prepares the data for the charts
}
/*When the new date range is selected and the submit button is clicked,
this method handles the click and gets the new data and prepares it for the chart*/
async handleButtonClick() {
await this.getDataFromApi();
await this.prepareDataForChart();
this.setState({ shouldRefresh: true });
}
/*This is where I pass the data to the chart component*/
<LineChart
chartData={this.state.chartTotalPopulation}
/>
В компоненте диаграммы я получаю данные из реквизита и устанавливаю состояние и Насколько я понимаю, всякий раз, когда состояние изменяется, диаграмма должна перерисовываться (это работает, но в некоторых случаях состояние никогда не устанавливается или устанавливается на пустой объект, из-за которого диаграмма не создается
Компонент диаграммы
this.state = {
chartData: {}
};
}
componentDidUpdate() {
let chartData = this.props.chartData;
//Check before updating the state to avoid infinite dom updates
if (chartData.labels.length > 0 && this.state.chartData.labels.length ===0) {
this.setState({ chartData: chartData });
}
}
render() {
return (
<div className="chartContianer">
<Line data={this.state.chartData}/>
</div>
);
}
Любые предложения о том, что я здесь делаю неправильно? Как я могу убедиться, что состояние правильно установлено в компоненте диаграммы?