Я использую ZingChart для визуального представления данных, но кажется, что диаграмма не обновляется при изменении состояния.
Моя конфигурация графика очень проста:
//in constructor()
const { data } = props;
this.state = {
chartConfig: {
type: 'area',
series: [
{values: this.updateValues(data)}
]
}
};
updateValues()
возвращает значения, которые будут отображаться, все работает нормально.
Теперь, когда родительский компонент изменяется, он отправляет несколько новых реквизитов, которые я буду использовать для установки нового состояния:
componentDidUpdate(prevProps) {
if (this.props.data !== prevProps.data) {
const chartConfig = { ...this.state.chartConfig };
chartConfig.series[0].values = this.updateValues(this.props.data);
this.setState({ chartConfig });
console.log(this.state.chartConfig); //<--- state successfully updated
}
}
И это метод рендеринга, я сначала проверяю, если состояние был обновлен (так как setState isyn c), и кажется, что все в порядке.
render() {
return (
<React.Fragment>
{this.state.chartConfig.series[0].values.length} {/* <--- state here is also up to date */}
<ZingChart data={this.state.chartConfig}/> {/* but not the chart */}
</React.Fragment>
);
}
Проблема теперь в том, что диаграмма не обновляется напрямую при изменении состояния (до тех пор, пока я не вызову refre sh) , так что может быть причиной этой проблемы? В блоге говорится, что диаграмма реагирует на изменения компонентов, но это не так.
Спасибо!