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

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

另一种选择是＆＃34; this.state.labelCounter + = 1＆＃34;

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

Reactjs：在componentDidMount中使用for-loop

2 个答案: