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

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其中我添加了对先前状态的回调函数的使用，但它已被弃用，因为

The callback version is useful when you're not certain what the captured value of state is.

我真的不喜欢你不明白解释的某些部分，有人可以解释一下为什么这样做 () => 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 版本，因为:

you're not certain what the captured value of state is.

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

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

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