带有 prevState 参数的 React setState 方法

Question

我是 React 的新手，只是对 setState 方法有疑问。假设我们有一个组件：

 class MyApp extends React.Component {

  state = {
    count: 3
  };

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

那么为什么我们必须在 setState 方法中使用 prevState --- 呢？为什么我们不能这样做：

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

原文由 user11224591 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

两种签名都可以使用，唯一的区别是，如果您需要根据之前的状态更改状态，您应该使用 this.setState(function) 它将为您提供快照（ prevState ）以前的状态。但如果更改不依赖于任何其他先前值，则建议使用较短的版本 this.setState({prop: newValue})

 this.setState(prevState =>{
   return{
        ...prevState,
        counter : prevState.counter + 1
   }
})

this.setState({counter : 2})

原文由 Dupocas 发布，翻译遵循 CC BY-SA 4.0 许可协议