Reactjs 为什么设置状态后react没有重新提交

在下面的react代码中，我试图通过更新字典来改变按钮的颜色。不幸的是，除非我强制重新启动，否则它不会工作

constjsonfromdatabase=[{“id”：1，“name”：“Ka”}，
{“id”：2，“name”：“Erd”}]；
const json=[{“id”：2，“name”：“Ka”}，
{“id”：3，“name”：“Erd”}]；
类ControllableButton扩展React.Component{
构造函数（）{
超级（）；
此.state={
黑色：真的，
datasetForDisplay:json，
datasetForStorage:jsonFromDatabase
}
}
onClickGroupToUpdate=（单元格、行、行索引）=>{
让toAdd={“id”：row.id，“name”：row.name}
this.setState（（prevState，props）=>{
datasetForStorage:prevState.datasetForStorage.push（toAdd）
})
log（“更新了数据库”）
console.log（this.state.datasetForStorage）
//这个.forceUpdate（）文件
}
onClickGroupSelected=（单元格、行、行索引）=>{
}
//cellButton应在每次单击时进行修改
cellButton=（单元格、行、枚举对象、行索引）=>{
让我按下按钮
设inDB=false
console.log（行）
for（此.state.datasetForStorage中的var组）{
if（this.state.datasetForStorage[group].id==row.id）{
inDB=真
}
}
国际单项体育联合会（inDB）{
theButton=this.onClickGroupSelected（单元格、行、行索引）}>
在数据库中
console.log（'已在数据库中'+row.id）
}否则{
theButton=this.onClickGroupToUpdate（单元格、行、行索引）}>
更新数据库
console.log（'不在数据库中'+row.id）
}
返回按钮
}
render（）{
返回(
身份证件
组名
生成组页
);
}
}
ReactDOM.render（，document.getElementById（'app'））；

---

以上代码在每次单击更新组后不会重新呈现，除非我强制更新。你能帮我找出我这里做错了什么吗？

当你将

setState（）

与更新程序函数一起使用时，该函数需要返回一个表示要合并的数据的对象。您没有返回任何内容，因此更新程序函数实际上返回

undefined

另一个问题是，您应该复制处于您所在状态的阵列，将新数据推入其中，然后使用它进行更新。永远不要直接改变你所在州的情况

onClickGroupToUpdate = (cell, row, rowIndex) => {
    let toAdd = { "id": row.id, "name": row.name }
    this.setState((prevState, props) => {
      // Copy the array that you have in state
      let datasetForStorageCopy = prevState.datasetForStorage.slice();
      datasetForStorageCopy.push(toAdd)
      // Return a new object describing the state change
      return {datasetForStorage: datasetForStorageCopy}
    })
    console.log("updated the database")
    console.log(this.state.datasetForStorage)
    // this.forceUpdate()
}

您没有正确地使用它，而且您正在对它进行变异

与此相反：

this.setState((prevState, props) => {
  datasetForStorage: prevState.datasetForStorage.push(toAdd)
})

您可以只传递一个普通对象：

this.setState({
  datasetForStorage: [...this.state.datasetForStorage,toAdd]
})

或者像您那样传递函数，但注意对象周围的

（）

，因此我们实际上返回一个对象：

this.setState((prevState, props) => ({
  datasetForStorage: [...prevState.datasetForStorage,toAdd]
}))

箭头函数隐式返回，但如果使用花括号，则不会返回

() => {}

所以你必须用括号把它们括起来

() => ({})

我使用了帮助我们轻松创建新阵列的