Question

我在此字段中看到类似的问题，但我的问题与这些问题不同，因为我没有直接从this.state设置状态。我的代码是

state = {
count: 0};

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

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

Answer 1

如果您不想直接改变状态，可以执行以下操作。

   this.setState(prevState => ({
        count: prevState.count+1;
    }));

Answer 2

执行此操作时：

++this.state.count

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

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

这会更改state的当前值，但是您不应直接使用setState来执行此操作，如错误所述。

执行此操作：

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

作为最佳实践，use a callback避免出现竞争情况，例如：

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

Answer 3

您可以在功能上更新状态，因此它采用状态的前一个值，传递状态的道具并计算下一个状态，如下所示：

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

不要直接改变状态。使用setState（）

3 个答案: