Question

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

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？

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对象的新实例。

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

setState未更新react Componet中的值

1 个答案: