Question

我有一个组件，其中eslint建议：“在引用先前状态时在setState中使用回调”。告诉我，我该如何重写代码以更新setState中组件的状态？

我试图将函数传递给setState中的第二个参数，但是出现错误，我不知道这是否是正确的方法。

状态：

constructor(props) {
  super(props);
  this.state = {
    minutes: '24',
    seconds: '59',
    disabled: false,
  };
}

componentDidMount和setState：

componentDidMount() {
  const prevMinutes = localStorage.getItem('minutes');
  const prevSeconds = localStorage.getItem('seconds');

  this.setState({
    minutes: +prevMinutes !== 0 ? +prevMinutes : this.state.minutes, // warning here
    seconds: +prevSeconds !== 0 ? +prevSeconds : this.state.seconds, // and here
  });
}

现在代码可以正常工作，这是合乎逻辑的，但是我想了解创建此类结构时的正确方法。

P.S。我了解解构，在了解了为什么需要进行回调以及如何正确进行回调之后，我将进行此操作。

Answer 1

它不是第二个参数，它仍然是第一个参数（称为更新程序），但是您可以使用以下函数替换对象：

this.setState(prev => ({
  minutes: +prevMinutes !== 0 ? +prevMinutes : prev.minutes,
  seconds: +prevSeconds !== 0 ? +prevSeconds : prev.seconds,
}));

根据： https://reactjs.org/docs/react-component.html#setstate

第二个参数只是状态更改后调用的回调。

setState中的回调

1 个答案: