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

时间:2019-01-06 03:01:13

标签: javascript reactjs jsx

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

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

我收到警告:

  

请勿直接更改状态。使用setState()   反应/无直接突变状态

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

3 个答案:

答案 0 :(得分:4)

您正在对this.state.question进行不必要的assignment addition-您只需要在此处添加。此外,在根据先前的值the docs state更新状态时:

  

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

基于先前值更新状态的正确方法是传入一个更新函数,该更新函数将根据先前值工作,即:

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

答案 1 :(得分:1)

错误在这里:

this.state.question += value

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

正确的方法是:

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

答案 2 :(得分:0)

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

Code Sandbox