为什么将此计为变异状态？

Question

handleClick(event) {
let value = event.target.value;

this.setState({ question: (this.state.question += value) });

我收到警告：

不要直接改变状态。 使用setState（）react / no-direct-mutation-state

如果我尝试用此代码加载页面。
我该如何解决，以免出现警告？
它说使用this.setState ，但这就是我在做的。

Answer 1

您正在为this.state.question做不必要的分配 -您只需要在此处添加即可。 此外，当根据先前的值更新状态时，文档状态为：

React可以将多个setState（）调用批处理到单个更新中以提高性能。 由于this.props和this.state可以异步更新，因此您不应依赖于它们的值来计算下一个状态。

根据先前的值更新状态的正确方法是传入更新函数，该更新函数以先前的值为准，即：

this.setState(prevState => ({ question: prevState.question + value }));

Answer 2

错误在这里：

this.state.question += value

+ =是用于将右操作数添加到左操作数的运算符。 您正在尝试为this.state.question添加值。

正确的方法是：

this.setState(previousState => ({ question: previousState.question + value }));

Answer 3

这被认为是变异状态，因为您正在为this.state.question中的this.state.question分配一个值(this.state.question += value) 。 我已经粘贴了指向代码沙箱的链接，您可以查看该代码沙箱以查看如何正确实现此行为。