javascript - React.js:在componentDidMount内部使用for循环

我无法理解为什么我的组件状态在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)
        }
    }

}

最佳答案

我认为您遇到的问题是对状态进行批量更新。这意味着，它不是同步工作，而是在循环后应用setState({ labelCounter: this.state.labelCounter + 1})，并将this.state.labelCounter + 1解析为固定的数字（在这种情况下为1），该数字被重新应用10次。因此，labelCounter设置为1 10次。

在上一个示例中，您是通过自己更改属性（而不是对其进行反应）来进行更新的，这就是它起作用的原因。

我想最好的方法是等待批处理被应用（例如，使用setTimeout(x, 0)），然后再进行其余操作，或者完全避免这种情况。