Reactjs：在组件内部使用for-loopDidMount

Question

我无法理解为什么我的组件状态在for循环中没有更改。

下面是一个例子：

class Example extends React.Component { 
    constructor() { 
     super() 
     this.state = { 
      labelCounter: 1, 
     } 
    } 


    componentDidMount() {     
     for (let i = 0; i < 10; i++) { 
      this.setState({ labelCounter: this.state.labelCounter + 1 }) 

      console.log(this.state.labelCounter) // this.statelabelCounter = 1 
     } 
    } 

} 

而如果我稍微改变了代码到这一点，似乎正在改变预期：

class Example extends React.Component { 
    constructor() { 
     super() 
     this.state = { 
      labelCounter: 1, 
     } 
    } 


    componentDidMount() {     
     for (let i = 0; i < 10; i++) { 
      this.setState({ labelCounter: ++this.state.labelCounter }) 

      console.log(this.state.labelCounter) 
     } 
    } 

} 

Answer 1

纠正我，如果我错了，但“这.state.labelCounter + 1“与”this.state.labelCounter ++“不同，因为它在更改状态值之前正在评估状态值。

另一种选择是 “this.state.labelCounter + = 1”

来源： （不完全相似） Difference between ++ and +=1 in javascript

Answer 2

我想你遇到的问题是，反应批更新国家。这意味着它不是同步工作，而是在循环后应用setState({ labelCounter: this.state.labelCounter + 1})，并且this.state.labelCounter + 1被解析为固定数字（本例中为1），该数字重新应用了10次。所以labelCounter设置为1 10次。

在上一个示例中，您通过自己更改属性进行更新（并且没有做出反应），这就是它工作的原因。

我猜想最好的办法是等待一批已被应用（例如使用setTimeout(x, 0)），然后再做其他事情，或者试图完全避免这种情况。