为什么有 2 个 setState 可用 [重复]答案

【问题标题】：Why there is 2 setState's available [duplicate]为什么有 2 个 setState 可用 [重复]
【发布时间】：2020-01-18 12:39:02
【问题描述】：

假设我有一个状态，

state = {
  counter: 0
}

点击按钮我想更新状态。

我的 updateCounter 函数是这样的，

updateCounter = () => {
    this.setState({counter: 1})
}

完美的工作。

我遇到了人们使用这个的情况，

updateCounter = () => {
    this.setState(prevState => ({
       ...prevState,
       counter: prevState.counter + 1
    }))
}

我的问题是，

【问题讨论】：

【解决方案1】：

存在第二个变体，以便您可以根据旧状态计算新状态。如果这是您需要做的事情，您应该使用第二个，否则您可能会遇到一些细微的错误，即您没有将状态设置为您期望的值。如果您的新状态与之前的状态无关，那么您使用哪个状态并不重要。

P.s，在此代码中不需要传播先前的状态。在类组件的this.setState React 会为你做一个浅层合并：

this.setState(prevState => ({
   ...prevState, // <-- not needed
   counter: prevState.counter + 1
}))

【讨论】：

【解决方案2】：

setState方法有两种形式：

因此，例如，在使用计数器的情况下，如果您将计数器从某个状态递增 1，则最好使用 setState 的函数形式，因为它可以确保您使用的是最新的来自国家的价值。

此外，如果您的新状态依赖于当前状态，则不使用函数形式可能会导致一些错误。我早先wrote a bit more in detail 讨论过它和其他常见问题。

【讨论】：