我是 React 新手,正在尝试使用 react-chartjs-2 测试一些图表组件。我有两个测试数据对象,我希望在按下更新按钮时在它们之间切换。
主App
组件已设置为处理Bar
(来自react-chartjs-2)和Button
组件。 state
引用用于 Bar
的数据对象,变量 updated
用于确定在 handleUpdate 中显示哪些数据()
方法。
当单击 Button
时,它应该调用 App
中的 handleUpdate()
方法,该方法作为 的引用向下传递>onClick
在 props 中。该方法评估 updated
并使用 setState()
更改正在使用的数据。我使用 setState()
的回调来记录状态并更改 updated
的值。
import React from 'react';
import ReactDOM from 'react-dom';
import { Bar } from 'react-chartjs-2';
const chart1 = {
labels: ['Team1', 'Team2', 'Team3', 'Team4', 'Team5'],
datasets: [{
label: 'Team points',
data: [503, 385, 270, 133, 65],
backgroundColor: [
'#4DB6AC',
'#E57373',
'#7986CB',
'#F06292',
'#E0E0E0'
]
}]
};
const chart2 = {
labels: ['Team1', 'Team2', 'Team3', 'Team4', 'Team5'],
datasets: [{
label: 'Team points 2',
data: [303, 185, 470, 313, 65],
backgroundColor: [
'#4DB6AC',
'#E57373',
'#7986CB',
'#F06292',
'#E0E0E0'
]
}]
};
class App extends React.Component {
constructor(props) {
super(props);
this.handleUpdate = this.handleUpdate.bind(this);
this.updated = false;
this.state = {
chartData: chart1
}
console.log(this.state.chartData);
console.log(this.updated);
}
// Toggle between chart1 and chart2 based on value of updated
handleUpdate() {
if (!this.updated) {
this.setState({
chartData: chart2
}, () => {
console.log(this.state.chartData);
this.updated = true;
});
}
else {
this.setState({
chartData: chart1
}, () => {
console.log(this.state.chartData);
this.updated = false;
});
}
}
render() {
return(
<div>
<Bar data={this.state.chartData} width={650} height={400} />
<Button handleOnClick={this.handleUpdate} />
</div>
);
}
}
const Button = (props) => (
<button id="update-chart" onClick={props.handleOnClick}>Update</button>
);
ReactDOM.render(
<App />,
document.getElementById('chart-container')
);
第一次单击按钮时,一切都会按预期工作,状态会更新,组件会重新渲染以显示新数据。但是,在后续单击中,状态保持不变,并且图表继续引用相同的数据。
console output - 第一个对象是初始渲染,单击按钮后将记录后续两个对象。正如您所看到的,第一次单击按钮时数据会发生变化,但第二次或任何后续单击时不会发生变化。
我知道 setState()
是异步的,并且可能会批量更新,但我不明白的是为什么它在第一次点击时成功工作,但不是每次其他点击,以及为什么回调正在被调用,但状态没有改变。
编辑:我认为该问题与 react-chartjs-2 有关。 。如果我删除 import
语句来导入 Bar
组件,并将 Bar
定义为与 Chartjs 无关的常规函数组件,则状态每次点击时,App
都会成功在两个数据对象之间进行更改。
所以它似乎与将 data prop 从react-chartjs-2 传递到 Bar
组件有关。尽管我不确定为什么这会阻止 App
的状态发生变化,因为它是顶级组件。
Here is a JSFiddle展示了当不使用 Bar
作为react-chartjs-2组件时它是如何工作的。
最佳答案
我希望我可以使用它作为评论,但我正在重新创建您所拥有的内容,并且无法复制您的错误。你的代码很难解释,这可能会让我/我们失望。这是我对 handleUpdate
const chartData = this.updated ? chart2 : chart1
this.setState({chartData}, () => {
this.updated = this.updated ? false : true
})
关于reactjs - 单击按钮时 React setState() 不更新状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46577746/