Reactjs 如何在循环中持续更新React状态

我是一个React初学者，我试图了解如何实现组件状态的实时更新。具体来说，我想在我的电路板边界上循环，并实时设置给定单元的颜色

当我调用“colorBoard”函数时，单元格被添加到状态中，但更新从未发生。有没有办法让电路板一个单元一个单元地更新，让它看起来“活的”

接口AppState{
//表示电路板中白细胞的位置数组
细胞：位置[]；
}
导出类应用程序扩展了React.PureComponent{
构造函数（props:{}）{
超级（道具）
//最初，电路板是全黑的。
此.state={
彩色细胞：[]
}
}
addCell=（位置）=>{
this.setState（{coloredCells:[…this.state.coloredCells，pos]}）
}
//色板最好放在一个单独的文件中，并且
//向“addCell”函数传递回调。
色板=（添加单元格：（位置）=>void）=>{
for（设r=0；r0.9）{
addCell（{row:r，col:c}）
}
}
}
}
render（）{
返回(
); 
}

来自

setState（）不会立即改变this.state，但会创建挂起的状态转换。调用此方法后访问this.state可能会返回现有值。无法保证对setState的调用的同步操作，可能会对调用进行批处理以提高性能

基本上，不要在循环中调用setState。这里发生的事情是这样的。state返回以前的值，因为挂起的状态更新尚未应用

要缓慢更新状态，可以使用

setTimeout

如果每次循环迭代都需要更新的状态，则应将函数传递给

this.setState

，而不是对象。更新程序函数的参数为

setState（updater[callback]）//setState函数的签名

第一个参数是具有签名的更新程序函数：

（状态、道具）=>状态更改

更新程序函数接收的状态和道具都是有保证的 更新程序的输出与 国家

---

请参见示例

您可能不应该更新每个单元格的状态，而应该定义一个一次性更新所有单元格的操作。虽然示例只是在单元格上循环，但我想本质上是“雕刻”在黑板上使用某种算法的路径。我希望这种情况实时发生，以便我可以使用它来演示路径雕刻算法的工作原理。要在设置状态后获得更新状态，需要使用

setState

，要在短时间后更新状态，需要使用JavaScript的

setTimeout

。