Reactjs React setState（）单击按钮时未更新状态

我是一个新的反应和尝试测试一些图表组件使用。我有两个测试数据对象，我希望在按下更新按钮时在它们之间切换

主

应用程序

组件已设置为处理

条

（来自react-chartjs-2）和

按钮

组件。

状态

引用要用于

条

的数据对象，变量

updated

用于确定要在

handleUpdate（）方法中显示的数据

单击
按钮
时，它应调用
应用程序
中的
handleUpdate（）
方法，该方法作为props中的
onClick
的参考传递。该方法计算
updated
并使用
setState（）
更改正在使用的数据。我正在使用
setState（）
的回调来记录状态并更改
updated
的值

从“React”导入React；
从“react dom”导入react dom；
从'react-chartjs-2'导入{Bar}；
常量图表1={
标签：['Team1'，'Team2'，'Team3'，'Team4'，'Team5']，
数据集：[{
标签：“团队积分”，
数据：[503385270133,65]，
背景颜色：[
"4DB6AC",，
"E57373",，
"7986CB",，
"F06292",，
“#e0”
]
}]
};
常量图表2={
标签：['Team1'，'Team2'，'Team3'，'Team4'，'Team5']，
数据集：[{
标签：“团队积分2”，
数据：[303185470313365]，
背景颜色：[
"4DB6AC",，
"E57373",，
"7986CB",，
"F06292",，
“#e0”
]
}]
};
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleUpdate=this.handleUpdate.bind（this）；
this.updated=false；
此.state={
图表数据：图表1
}
console.log（this.state.chartData）；
console.log（this.updated）；
}
//根据更新的值在图表1和图表2之间切换
handleUpdate（）{
如果（！this.updated）{
这是我的国家({
图表数据：图表2
}, () => {
console.log（this.state.chartData）；
this.updated=true；
});
}
否则{
这是我的国家({
图表数据：图表1
}, () => {
console.log（this.state.chartData）；
this.updated=false；
});
}
}
render（）{
返回(
);
}
}
常量按钮=（道具）=>(
更新
);
ReactDOM.render(
-第一个对象是初始渲染，随后的两个对象在单击按钮后被记录。如您所见，数据在第一次单击按钮时确实会更改，但在第二次或任何后续单击时都不会更改

我知道
setState（）
是异步的，可能会批量更新，但我不明白的是，为什么它在第一次单击时就可以成功运行，而不是每隔一次单击，为什么调用回调，但状态没有改变

edit：我认为问题与相关。如果我删除
import
语句以导入
Bar
组件，并将
Bar
定义为与Chartjs无关的常规功能组件，则每次单击时，
App
的状态在两个数据对象之间成功更改

因此，它似乎与从react-chartjs-2将数据道具传递到
栏
组件有关。尽管我不确定为什么这会阻止
App
的状态更改，因为它是顶级组件

显示在不使用react-chartjs-2组件时它是如何工作的。
我希望我可以用它作为一个注释，但我正在重新创建您所拥有的内容，无法复制您的错误。您的代码很难解释，这可能会让我/我们感到困惑。这是我对您的
handleUpdate的实现

const chartData = this.updated ? chart2 : chart1
this.setState({chartData}, () => {
  this.updated = this.updated ? false : true
})

@对于一些已经知道自己在做什么的人来说，这是一个副本。OP显然不知道。console中随时都有警告或错误吗？@Panther没有错误。我包括了控制台输出的图像，第一个数据对象来自初始渲染，其他两个对象来自按钮单击。第一次单击会进行更改，但其他人不这样做。关于这是一篇重复的文章，我已经检查了那篇文章和其他许多文章，大多数都是关于setState是异步的和回调的，我用它来记录更改。@Andrew确定。我删除了投票结果。我将
handleUpdate
更改为您的代码，但仍然是一样的；状态更改只需单击第一个按钮即可。如果代码很难解释，但据我所知，它在语法上是正确的，我深表歉意。理想情况下，我会从其他地方提取图表数据，但这只是为了测试。这里不需要三元，您可以这样做：this.setState（{updated:！updated，}）；