为啥这被算作变异状态？

Posted 2023-02-21

【中文标题】为啥这被算作变异状态？

【英文标题】：Why is this counted as mutating state?为什么这被算作变异状态？

【发布时间】：2019-06-01 04:01:17

【问题描述】：

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

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

我收到警告：

不要直接改变状态。使用 setState() 反应/无直接突变状态

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

【问题讨论】：

this.state.question + value

【参考方案1】：

错误就在这里：

this.state.question += value

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

正确的做法是：

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

【讨论】：

一般来说是的，不过我建议使用setState 的函数版本，因为它是根据之前的状态进行修改的。像这样的东西：this.setState(state => ( question: state.question + value ));。一旦 Concurrent React 发布，这将变得更加必要。

@Namoz 如果我这样做，那么状态只会更新我按下的最后一个按钮，而不是最后一个按钮。例如（它是一个计算器），当它是 += 时，它会显示我按下的最后一个按钮。当我将其更改为 + 时，它只显示倒数第二个按钮。

【参考方案2】：

你正在做一个不必要的assignment addition 到this.state.question - 你只需要在这里添加。此外，当根据之前的值更新状态时，the docs state:

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

根据前一个值更新状态的正确方法是传入一个更新函数，该函数对前一个值起作用，即：

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

【参考方案3】：

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

Code Sandbox