这段代码中 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 在调用setState()潜在陷阱后立即阅读。相反，使用 componentDidUpdate或setState回调(setState(updater,callback))，保证在应用更新后触发。如果您需要根据之前的状态设置状态，请阅读 [在文档中]的 updater 参数。

所以而不是：

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

...你可以做：

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

有关更多信息，另请参阅此学习反应文章。