为什么 setState() 在重复调用期间没有反应更新状态？

Question

我开始使用官方文档学习 React 时遇到了这个问题 "React may batch multiple setState() calls into a single update for performance. Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state." 在练习时，我遇到了这个问题，我认为这在某种程度上与此有关，但我仍然不明白为什么 snippet(1) 不起作用而 snippet(2) 起作用。

   //  code-snippet(1)

    import React from "react";
    import ReactDOM from 'react-dom';
    import "./styles.css";
    class Count extends React.Component {
      constructor(props) {
        super(props);
        this.state = {count : 0};
      }
      increment() {
        var newCount = state.count + 1;
        this.setState({count: newCount});
      }
      increment5() {
        this.increment();
        this.increment();
        this.increment();
        this.increment();
        this.increment();
      }
      render() {
        return (
        <div>
          <h1>Count - {this.state.count}</h1>
          <button onClick={() => this.increment5()}>Increment</button>
        </div>
        );
      }
    }
     ReactDOM.render(<Count />, document.getElementById("root"));


//   code-snippet(2)

     import React from "react";
        import ReactDOM from 'react-dom';
        import "./styles.css";
        class Count extends React.Component {
          constructor(props) {
            super(props);
            this.state = {count : 0};
          }
          increment() {
            this.setState(function(state) {
              var newCount = state.count + 1;
              return {count : newCount};
            });
          }
          increment5() {
            this.increment();
            this.increment();
            this.increment();
            this.increment();
            this.increment();
          }
          render() {
            return (
            <div>
              <h1>Count - {this.state.count}</h1>
              <button onClick={() => this.increment5()}>Increment</button>
            </div>
            );
          }
        }
         ReactDOM.render(<Count />, document.getElementById("root"));

Answer 1

我认为如果您只是在第一个代码段的增量方法中添加 "this" 它会完美地工作：

 increment() {
    var newCount = this.state.count + 1; //you forgot the this keyword on this line
    this.setState({count: newCount});
  }

Answer 2

因为 setState 以异步方式工作。这意味着在调用 setState 之后 this.state 变量不会立即改变。因此，如果您想在设置状态后立即执行操作，则状态可能具有较旧的值，以便第二次状态更新可能不会考虑先前的状态值。

与第二个脚本一样，回调函数将始终使用最后一个状态值，这就是为什么第二种方法可以正常工作的原因。

而且您在第一个片段中的 this 关键字中还遗漏了 this 关键字。

为什么 setState() 在重复调用期间没有反应更新状态？

Why isn't setState() in react updating state during recurrent calls?

javascript

state

setstate

rxjs

reactjs