javascript - 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

正如您在 documentation 中看到的那样

This rule should prevent usage of this.state inside setState calls. Such usage of this.state might result in errors when two state calls are called in batch and thus referencing old state and not the current state. An example can be an increment function:

function increment() {
  this.setState({value: this.state.value + 1});
}

If these two setState operations is grouped together in a batch it will look be something like the following, given that value is 1:

setState({value: 1 + 1})
setState({value: 1 + 1})

This can be avoided with using callbacks which takes the previous state as first argument:

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它会正常工作，没有错误。