javascript - React 的 setState 方法带有 prevState 参数

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)
}));

Answer 1

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

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

this.setState({counter : 2})