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

Вы можете удалить ...this.state из setState, поскольку он будет обновлять параметры только в том состоянии, которое вы изменили.

В документации React вы можете увидеть, что setState(stateChange) выполняетa выполняет поверхностное объединение 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

Попробуй это.Это потому что setState является асинхронным.

handleSelect({ nativeEvent }) {

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

Answer 3

Как вы можете видеть в документации

Это правило должно запрещать использование this.state внутри вызовов setState.Такое использование 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, и он будет работать нормально, без ошибок.