我正在查看一些示例反应代码(在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/
答案 0 :(得分:2)
你的例子也可以改写为:
this.setState(prevState => {
prevState.name = "NewValue"
return "NewValue";
});
当函数传递给state
时,重要的是不要改变传递的参数并返回新状态。你的例子都失败了。
...
的输入构建新的状态对象来表示更改prevState
是对先前状态的引用。它不应该直接变异。相反,应该通过基于prevState
...
(来自setState)
我不确定是否有可能在您的示例中使用setState
,但查看更改日志我真的很怀疑。