setState не обновляет значение в реагирующем компоненте

Question

Я пытаюсь обновить состояние в моем компоненте реакции.Я вызываю функцию:

async removeActivePaymentMethod() { 
  console.log('activePaymentMethod',this.state.activePaymentMethod); //value is 20289
  const order = this.state.order;
  order.activePaymentMethod = null;
  await this.setState({ activePaymentMethod: null, order },function () {
    console.log('activePaymentMethod',this.state.activePaymentMethod);//value is 20289
});

}

Как видите, мой вызов console.log находится в обратном вызове для setState.Почему это значение не обновляется до нуля?

Answer 1

проблема в том, что, не замечая, вы изменяете свое состояние.
В этих строках:

const order = this.state.order;
order.activePaymentMethod = null;

В результате получается, что order является ссылкой на значение order в состоянии.и когда вы изменяете его, вы меняете ту же ссылку this.state.order ссылки.
Чтобы проверить, что я предлагаю вам записать значения this.state.order.activePaymentMethod и order.activePaymentMethod после второй строки.Чтобы это исправить, вы должны уничтожить свой объект состояния следующим образом:

const order = {...this.state.order, activePaymentMethod: null};

, который создаст новый экземпляр объекта order.

Это происходит из-за того, как реагирует сравнение объектов в состоянии - реагирует использование ссылочного равенства, а не глубокого равенства значений, и когда вы передаете измененный объект order, оно не обнаруживает изменения (как состояния, так иorder относится к тому же объекту).