我正在创建一个仪表板应用程序,它从端点获取数据并使用 setState 方法将端点返回的 JSON 中的变量分配给状态变量。当我对状态进行更改时,某些组件(例如“react-svg-gauge”)会更新,但“react-chartjs-2”不会更新。
下面的代码是我的状态在我的实际应用程序中如何变化的示例。此示例将在 chrome 开发者控制台中显示状态变量的正确值,但不会相应地更新 DOM。
import React, { Component } from 'react';
import {Doughnut} from 'react-chartjs-2';
class DoughnutExample extends Component {
state = {
data: {
labels: [
'Red',
'Green',
'Yellow'
],
datasets: [{
data: [300, 50, 100],
backgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56'
],
hoverBackgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56'
]
}]
}
}
componentDidMount() {
this.timer = setInterval(
() => this.increment(),
1000
)
}
componentWillUnmount() {
clearInterval(this.timer)
}
increment() {
let datacopy = Object.assign({}, this.state.data)
datacopy.datasets[0].data[0] = datacopy.datasets[0].data[0] + 10
console.log(datacopy.datasets[0].data[0])
this.setState({data: datacopy})
}
render(){
return(
<div>
<Doughnut data = {this.state.data}/>
</div>
)
}
}
export default DoughnutExample;
我是否正确使用了生命周期方法?此代码将更新饼图的值、状态变量,但不会正确渲染 DOM。