javascript - 不要直接改变状态。使用 setState()

Question

我在这个领域看到了类似的问题，但我的问题与这些不同，因为我不直接从 this.state 设置状态。我的代码是

state = {
count: 0};

handleIncrement = product => {
    console.log(product);
    this.setState({ count: ++this.state.count });
};

如你所见，我没有直接设置状态，而是在这一行给了我这个错误

Answer 1

当你这样做时:

++this.state.count

这会尝试直接改变状态，因为您正在尝试这样做:

this.state.count = this.state.count + 1

这会更改状态的当前值，但您应该使用 setState 来执行此操作，而不是像错误所述那样直接执行。

这样做:

this.setState({ count: this.state.count + 1 });

作为最佳实践，use a callback避免竞争条件，例如:

this.setState(prev => {
    return {
        count: prev.count + 1,
    };
});