在循环中调用setState仅更新状态1次

Question

是否有理由setSate()在循环中调用会阻止它多次更新状态？

我有一个非常基本的jsbin,突出了我所看到的问题.有两个按钮.一个将状态计数器更新为1.另一个在循环中调用One的基础函数 - 这似乎会多次更新状态.

我知道这个问题的几个解决方案,但我想确保我首先理解这里的基础机制.为什么不能setState在循环中调用？我是否笨拙地编码阻止了预期的效果？

Answer 1

来自React Docs:

setState()不会立即改变this.state,但会创建挂起状态转换.调用此方法后访问this.state可能会返回现有值.无法保证对setState的调用进行同步操作,并且可以对调用进行批处理以获得性能提升.

基本上,不要setState在循环中调用.这里发生的正是文档所指的内容:this.state返回前一个值,因为还没有应用挂起状态更新.

Answer 2

有一种在循环中更新状态的好方法。只需创建一个空变量，将其值设置为更新的状态，调用setState()，并将此变量传递给它：

const updatedState = {};

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

Answer 3

你必须使用类似的东西：

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

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

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

Answer 4

我有同样的问题。但是尝试了一些不同的方法。

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>
   );
 }

我希望这有帮助。