时间戳

首页 > 解决方案 > setState 中的回调

javascript - setState 中的回调

问题描述

我有一个组件，其中 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
  });
}

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

PS我知道解构，在我理解为什么我需要做回调以及如何正确地做之后我会这样做。

标签： javascriptreactjs

解决方案

它不是第二个参数，它仍然是第一个参数（称为更新程序），但你用这样的函数替换对象：

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

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

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

推荐阅读