Javascript 在循环中调用setState只会更新状态1次

是否有理由在循环中调用

setState（）

会阻止它多次更新状态

这突出了我所看到的问题。有两个按钮。其中一个将状态计数器更新1。另一个调用循环中的一个的底层函数——这似乎会多次更新状态

---

我知道这个问题的几种解决方案，但我想确保我首先理解了这里的基本机制。为什么不能在循环中调用

setState

？我是否对其进行了笨拙的编码，从而阻止了所需的效果？

我能够使您的代码正常工作，通过执行以下操作在循环中调用setState：

 manyClicks() {
   for (i = 0; i < 100; i++) {
     this.setState({clicks: this.state.clicks += 1})
   }
 }
enter code here

manycicks（）{
对于（i=0；i<100；i++）{
this.setState（{clicks:this.state.clicks+=1}）
}
}
在这里输入代码

希望这有帮助

来自：

setState（）

将更改排入组件状态队列，并告知React需要使用更新的状态重新呈现此组件及其子组件。这是用于更新用户界面以响应事件处理程序和服务器响应的主要方法

将

setState（）

视为更新组件的请求，而不是即时命令。为了更好地感知性能，React可能会延迟它，然后在一次过程中更新多个组件。React不保证立即应用状态更改

setState（）

并不总是立即更新组件。它可以批处理更新或将更新推迟到以后。这使得调用

setState（）

后立即读取

This.state

成为一个潜在的陷阱

---

基本上，不要在循环中调用

setState

。这里发生的事情正是文档所指的：

this.state

正在返回以前的值，因为挂起的状态更新尚未应用。

我也遇到了同样的问题。但尝试了一种稍微不同的方法

iterateData(data){
  //data to render
   let copy=[];
   for(let i=0;<data.length;i++){
     copy.push(<SomeComp data=[i] />) 
    }
    this.setState({
      setComp:copy
    });
 }
 render(){
   return(
     <div>
       {this.state.setComp}
    </div>
   );
 }

iterateData（数据）{
//要渲染的数据
让copy=[]；
for（设i=0；基本上，setState是异步调用的。它还有一个回调函数，一旦状态发生变化，您就可以使用该函数执行某些操作。
另外，如果一个接一个地调用多个setState，它们将按照前面编写的方式批处理在一起。
有一种很好的方法来更新循环中的状态。只需创建一个空变量，将其值设置为更新状态，调用
setState（）
，然后将此变量传递给它：

const updatedState = {};

if (vars.length) {
  vars.forEach(v => {
    updatedState[v] = '';
    this.setState({
      ...this.state
      ...updatedState,
    });
  });
}

我在创建导入项目的功能时遇到了这个问题。
由于导入项目的数量可能会很大，所以我需要向站点用户提供反馈（比如进度条），以便他们知道他们不会坐在那个里无所事事

正如我们所知，我们不能在循环中
setState
，我采取了一种不同的方法，递归地运行任务

下面是一个示例代码
您必须使用类似的方法：

const MyComponent = () => {
  const [myState, setMyState] = useState([]);

  const handleSomething = (values) => {
    values.map((value) => {
      setMyState((oldValue) => [...oldValue, { key: value.dataWhatYouWant }]);
    }
  }

  return (<> Content... </>);
}

constmycomponent=（）=>{
const[myState，setMyState]=useState（[]）；
常量handleSomething=（值）=>{
values.map（（值）=>{
setMyState（（oldValue）=>[…oldValue，{key:value.dataWhatYouWant}]）；
}
}
返回（内容…）；
}
实际上
setState（）
方法是异步的。相反，您可以这样实现它

manyClicks() {
var i = 0;
for (i = 0; i < 100; i++) {
  //this.setState({clicks: this.state.clicks + 1}); instead of this
  this.setState((prevState,props)=>({
      clicks: ++prevState.clicks
   }))
   }
 }

manycicks（）{
var i=0；
对于（i=0；i<100；i++）{
//this.setState（{clicks:this.state.clicks+1}）；而不是this
this.setState（（prevState，props）=>({
单击：++prevState.clicks
}))
}
}
这是因为他正在调用
this.setState（{clicks:this.state.clicks+=1}）；
，这真是个坏主意。
+=
是直接改变状态，而不是让React通过
setState
批量更新来改变状态。我不知道我怎么会在文档中遗漏了这一点，但谢谢你。这更有意义。请注意，
setState
的一种形式包含一个函数，允许你访问当前状态，在本例中确实有效。请参见示例。很好。我实际上不知道您可以将函数传递到
setState
此答案节省了我一周的上载状态处理、TVMOW，这是一种完美且干净的方法，可以在setState被破坏成一个时绕过多个调用的React优化。