Question

对于这段代码，我得到eslint（AirBnb config）错误：引用以前的状态时，请在setState中使用回调

此错误是否会以某种方式影响性能，以及如何解决？

  handleSelect(event) {
    const entry = event.nativeEvent;

    if (entry == null) {
      this.setState({ ...this.state, selectedEntry: entry });
    } else
      this.setState({
        ...this.state,
        selectedEntry: JSON.stringify(entry),
        markerIsEnabled: true
      });

    console.log(event.nativeEvent);
  }

Answer 1

尝试一下。这是因为setState是异步的。

handleSelect({ nativeEvent }) {

    if (nativeEvent == null) {
        this.setState((previousState) => ({
            ...previousState, selectedEntry: nativeEvent
        }));
    } else
      this.setState((previousState) => ({
        ...previousState,
        selectedEntry: JSON.stringify(entry),
        markerIsEnabled: true
      }));
  }

Answer 2

您可以从...this.state中删除setState，因为它只会在您更改的状态下更新参数。

您可以在React documentation中看到setState(stateChange)执行了一个stateChange到状态的浅合并。

Object.assign(
  previousState,
  stateChange,
  ...
)

这意味着您无需传递以前的状态，除非依赖于新的属性，因为setState将为您完成此合并。

handleSelect(event) {
    const entry = event.nativeEvent;

    if (entry == null) {
      this.setState({ selectedEntry: entry });
    } else {
      this.setState({
        selectedEntry: JSON.stringify(entry),
        markerIsEnabled: true
      });
    }

    console.log(event.nativeEvent);
  }

Answer 3

如您在documentation

中所见

此规则应防止在setState调用中使用this.state。当批量调用两个状态调用并因此引用旧状态而不是当前状态时，this.state的这种用法可能会导致错误。一个示例可以是增量函数：
function increment() {
  this.setState({value: this.state.value + 1});
}
如果将这两个setState操作成批分组在一起，则假定值为1：
setState({value: 1 + 1})
setState({value: 1 + 1})
这可以通过使用将先前状态作为第一个参数的回调来避免：
function increment() {
  this.setState(prevState => ({value: prevState.value + 1}));
}

所以这就是为什么要使用该规则，以避免像本示例一样出现错误。

对于您而言，您应该做的是

handleSelect({ nativeEvent }) {    
    if (nativeEvent == null) {
        this.setState(previousState => ({
            ...previousState, 
            selectedEntry: nativeEvent
        }));
    } else {
      this.setState(previousState => ({
        ...previousState,
        selectedEntry: JSON.stringify(entry),
        markerIsEnabled: true
      }));
    }
}

但是对于您的情况，不会发生此错误，因为您没有连续的两个setState，而且...this.state或...prevState不会造成任何区别，因为您没有使用以前的状态来设置新状态。

因此，对于您在问题中提供的代码，只需删除...this.state，它就可以正常工作，没有任何错误。

ESLint：在引用先前状态时在setState中使用回调

3 个答案: