setState 没有更新反应组件中的值答案

【问题标题】：setState is not updating value in react ComponetsetState 没有更新反应组件中的值
【发布时间】：2019-06-11 17:56:22
【问题描述】：

我正在尝试更新我的反应组件中的状态。我调用函数：

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 的回调中。为什么这个值没有更新为 null？

【问题讨论】：

离奇。同样有点话题，order.activePaymentMethod = null 背后的原因是什么，看起来像是一个状态突变。
以及为什么在传递回调以设置状态时使用 await？
setState 不返回承诺，因此等待它没有意义。但这确实很奇怪。
您确定没有其他状态更新与此一起批处理并覆盖 null？
似乎在这里工作snack.expo.io/@lekgwaraj/delete-me-6

标签： reactjs setstate

【解决方案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 对象的新实例。

发生这种情况是因为 react 比较状态中的对象的方式 - react 使用引用相等，而不是深度值相等，并且当您传递更改后的 order 对象时，它不会检测到更改（状态和 order指同一对象）。

【讨论】：

但是order和activePaymentMethod是不同的变量，请看代码。