reactjs - React setState 直接修改 prevState 的后果？

Question

我正在查看一些示例 React 代码(在 antd 文档中)，我注意到它们的代码相当于:

this.setState(prevState => { prevState.name = "NewValue"; return prevState; });

这看起来有点顽皮，但它真的会破坏任何东西吗？由于它使用箭头函数，因此即使 React 在后台对更改进行批处理，也不会破坏所应用更改的顺序。

当然，setState 旨在期望部分状态，因此可能会产生性能副作用，因为它可能会尝试将整个状态应用于自身。

编辑:(回应@Sulthan)

实际代码是这样的:

handleChange(key, index, value) {
  const { data } = this.state;
  data[index][key].value = value;
  this.setState({ data });
}

n.b. data 是一个数组，因此它只是通过引用复制然后进行变异。

这实际上是完全错误的，因为它甚至没有使用箭头函数来获取最新状态。

它来自此处的可编辑表格示例:https://ant.design/components/table/

Answer 1

您的示例也可以重写为:

this.setState(prevState => {
    prevState.name = "NewValue"
    return "NewValue";
});

当函数传递到状态时，重要的是不要改变传递的参数并返回新状态。你的例子都失败了。

...prevState is a reference to the previous state. It should not be directly mutated. Instead, changes should be represented by building a new state object based on the input from prevState...

(来自 setState )

我不确定是否可以像您的示例中那样使用setState，但查看更改日志我真的很怀疑。