这段代码中 setState 工作方式的混乱

Question

我是 React 的新手，正在学习 setState 的工作原理。所以，你可以看到下面的代码：

class Counter extends React.Component {

  constructor(props) {

    super(props);

    this.handleReset = this.handleReset.bind(this);

    this.state = {

      count: 5

    };

  }

 handleReset() {

    this.setState({count:0})

this.setState({count:this.state.count+1})

}

render() {

    return (

      <div>

        <button onClick={this.handleReset}>reset</button>

      </div>

    );

  }

所以，我从上面的代码中期望的是，当我点击按钮时，它不是输出 1，而是将 1 添加到计数的当前状态并显示 6。这就是我假设 setStates 在 handleReset 方法中工作的方式。我不知道为什么它呈现 6 而不是 1

Answer 1

setState可以将更新程序函数作为参数。在这种情况下，该函数将传递前一个状态，并且您返回一个更改对象，该对象将通知下一个状态。文档甚至直接提到了这一点。setState()并不总是立即更新组件。它可能会批量更新或推迟更新。这使得this.state&nbsp;在调用setState()潜在陷阱后立即阅读。相反，使用&nbsp;componentDidUpdate或setState回调(setState(updater,callback))，保证在应用更新后触发。如果您需要根据之前的状态设置状态，请阅读 [在文档中]的 updater 参数。所以而不是：this.setState({&nbsp;count:&nbsp;this.state.count&nbsp;+&nbsp;1});...你可以做：this.setState((prevState)&nbsp;=>&nbsp;({&nbsp;count:&nbsp;prevState.count&nbsp;+&nbsp;1&nbsp;}))有关更多信息，另请参阅此学习反应文章。