不要直接改变状态。使用 setState()答案

【问题标题】：Do not mutate state directly. Use setState()不要直接改变状态。使用 setState()
【发布时间】：2018-09-30 13:30:02
【问题描述】：

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

state = {
count: 0};

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

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

【问题讨论】：

++this.state.count 这会修改状态。
你好@vlaz，如果我不使用这个符号；我用什么？
@SeyyedMahdiyarZerehpoush 我已经回答过了。
根据经验，您不应该在 setState 中使用 this.state。

标签： javascript reactjs

【解决方案1】：

当你这样做时：

++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,
    };
});

【讨论】：

警告：状态更新是异步发生的，因此在传递给setState 的内容中引用this.state 可能会导致数据竞争。最好传递一个带有prevState 参数的函数。
@JosephSible 是的，我知道，但问题与此无关。问题是关于直接改变状态。我会更新的。

【解决方案2】：

你不应该直接改变状态，你可以这样做。

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

【讨论】：

我很困惑。你的答案和其他 2 个答案有什么区别？
在这种情况下没有显着差异。你可能想读这个。 medium.com/@voonminghann/…
这个答案是最好的。将状态更新为取决于先前状态的值时，这是最好的方法。

【解决方案3】：

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

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

【讨论】：