根据当前状态反应setState

Question

我想知道如果我想根据当前状态更新状态，使用哪种形式的setState 。

React的setState将对象或函数作为参数。 据我了解，以下内容无法正常工作，因为React批量setState

state = {score : 0};

increaseScoreBy2 () {
 this.setState({score : this.state.score + 1});
 this.setState({score : this.state.score + 1});
}

而且最好使用

increaseScoreBy2 () {
 this.setState(prevState => { return { score: prevState.score + 2 }}});
}

但是如果我想要做的就是一次更新状态，应该使用哪种形式的setState ？ 这是个人偏好的问题吗？ 或者我们是否应该在根据当前状态更新状态时始终使用函数形式以避免任何可能的意外行为？

例如，以下代码有什么问题吗？

const newRegions = this.state.regions.map(...)
this.setState({ regions: newRegions });

Answer 1

如你所说，是的，一般的经验法则是“ 如果下一个状态依赖于先前的状态，则使用更新程序功能 。”

[ this.setState({ regions: this.state.regions.map(...) }) ]有什么问题吗？

我认为这取决于regions数组中的内容以及传递给map() 。 也许回答这个问题的最好方法是问问自己批量更新是否会导致问题：

const mapFcn = ...
const newState = Object.assign(
  {},
  { regions: this.state.regions.map(mapFcn) },
  { regions: this.state.regions.map(mapFcn) },
);

在某些情况下，这可能不是问题。 如果每个区域都是一个字符串， mapFcn = (region) => region.toUpperCase()可能不会导致任何问题。

如果regions是一个对象数组， mapFcn就像“经典”增量示例（ (region) => ({ ...region, count: region.count + 1 }) ），这可能是个问题。

Answer 2

状态需要一些时间来更新，并且在设置状态后立即对状态执行操作不是一个好习惯。 这使得在调用setState（）之后立即读取this.state是一个潜在的陷阱。 如果需要，可以使用成功更新状态后调用的回调函数。 以下是文档的链接： https ： //reactjs.org/docs/react-component.html#setstate

Answer 3

如果更新没有冲突，则使用对象更新程序多次调用setState 没有任何问题 ：

// works
setState({score: this.state.score + 1})
setState({players: [...this.state.players, 'Jack']})

如果更新有冲突，则不应从this.state获取先前的状态，而是setState将在函数更新程序中提供给您：

// works
setState((prevState)=> ({score: prevState + 1}));
setState((prevState)=> ({score: prevState + 1}));

这两个都很好。

如果依赖于当前状态，即使只是一个调用，只是使用对象更新器调用setState是错误的：

// does not work right
setState({
  score: this.state.score + 1,
  victory: this.state.score === 5 // this will be true one "turn/goal" later than expected
});