Reactjs：在componentDidMount中使用for循环

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

我认为您遇到的问题是批量更新状态。这意味着它不是同步工作，而是在循环之后应用setState({ labelCounter: this.state.labelCounter + 1})，并且this.state.labelCounter + 1 被解析为一个固定数字（在本例中为1），即重新应用10 次。所以 labelCounter 设置为 1 10 次。

在最后一个示例中，您通过自己更改属性来更新（而不是做出反应），这就是它起作用的原因。

我想最好的方法是等待一个批次被应用（例如使用setTimeout(x, 0)），然后再做剩下的事情，或者尝试完全避免这种情况。

Answer 2

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

另一个选项是“this.state.labelCounter += 1”

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