根据渲染函数中的前一个设置状态

Question

我最近阅读了 react.js documentation 并发现根据之前的状态值设置状态不一致。这是这段代码：

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

我认为设置state 的这种方式() => this.setState({ count: this.state.count + 1 }) 是错误的，您应该为此使用回调。所以我提出了PR，在其中我添加了对先前状态的回调函数的使用，但它已被弃用，因为

当您不确定捕获的状态值是什么时，回调版本很有用。

我真的不喜欢你不是解释的某些部分，有人可以解释为什么这样做() => this.setState({ count: this.state.count + 1 }) 设置状态是正确的。

提前致谢。

Answer 1

在您当前的示例中，您将默认状态设置为{ count: 0 }，您可以“安全”地执行setState({ count: this.state.count + 1 })，因为当您第一次更新您的状态时，0 + 1 将产生有效结果。

class App extends React.Component {
  state = { count: 0 }
  render() {
    return (
      <div>
         <p>You clicked {this.state.count} times</p>
         <button
           onClick={() => this.setState({ count: this.state.count + 1 })}
         >
           Click me!
         </button>
      </div>
    )
  }
}
ReactDOM.render(
  <App />,
  document.getElementById("app")
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

但是，让我们假设您对某些state 的初始值不是0，因此调用this.state.count + 1 可能会产生无效结果。这是您可以使用callback 版本的地方，因为：

您不确定捕获的状态值是什么。

class App extends React.Component {
  state = { count: null }
  render() {
    const handleClick = () => {
      this.setState((prevState) => {
        // count is initially `null`, so 
        // `null + 1` could yield an undesired result
        if (!Number.isInteger(prevState.count)) {
          return { count: 1 }
        }
        return { count: prevState.count + 1 }
      })
    }
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={handleClick}>
          Click me!
        </button>
      </div>
    ) 
  }
}
ReactDOM.render(
  <App />,
  document.getElementById("app")
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

这只是一个例子，但你明白了。

---

您的 PR 很可能被拒绝，因为文档中的示例是正确的，假设该示例用于通过执行 this.setState({ count: this.state.count + 1 }) 更新您的状态是“安全”的相同上下文。

这是文档：

• github.com/reactjs/reactjs.org/blob/master/content/docs/hooks-state.md

两种更新state 的方式都是正确的，应该在适当的时候使用。正如您在第二个示例中看到的那样，如果想要在更新您的 state 之前进行一些检查，“回调选项”将是一个更好的解决方案。

不过，文档中的示例是正确的，如果它改用“回调选项”，则不会产生任何好处。

Answer 2

使用返回函数

通过在此处传递函数，您将始终可以访问之前的状态。

this.setState((prevState) => ({ count: prevState.count + 1 }))

请注意，您还可以添加道具作为第二个参数。

如果您想了解有关此回调的更多信息，请查看this article。它非常详细。