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

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 中删除...this.state，因为它只会更新您已更改状态的参数。

您可以在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 2

正如您在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 不会有任何区别，因为您没有使用前一个state 设置一个新的状态。

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

Answer 3

试试这个。这是因为setState 是异步的。

handleSelect({ nativeEvent }) {

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