如何在给定我们必须传递与道具相同的对象的情况下不可变地更新对象？-解网

问：

我有一个对象，可以在单击按钮时更新。答：我将该对象作为道具传递给另一个组件。我现在正在做的是在按钮单击事件上以可变方式更新对象。amounts

onClick = e => {
  amounts.map(
      amount => (amount.tax = taxes ? 500 : 0)
  );
}

<Display amounts={amounts} />

如何以不可变的方式更新金额？

JavaScript的反应JS 不变性可变

评论

0赞 Tsvetan Ganev 9/15/2021

金额是数字数组吗？此外，您正在调用映射值，但随后您将其用作 - 这是拼写错误还是故意的？optionamount

0赞 Chandrika 9/15/2021

这是一个对象数组，这是一个错别字，我会纠正它

0赞 Nectos 9/15/2021

amounts.map创建不以任何方式使用的新数组。您实际上需要分配它才能产生效果。developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/......

0赞 Chandrika 9/15/2021

我明白你的意思了。但是，由于 amount 是对象数组，因此它会直接更新。但是，为了实现不变性，这是一个正确的解决方案吗？xyz = amounts.map(.....)amounts = xyz

0赞 Tsvetan Ganev 9/15/2021

另外，是否属于渲染？onClick<Display />

答：

1赞 Chris 9/15/2021 #1

正如评论中提到的，有几件事正在发生：

您没有更新 Array 引用，因此 React 不会基于此突变重新渲染。amounts
您正在用于更新单个属性。这将更新金额集合中的对象引用。Array#map
没有或类似的东西可以更新父组件中的属性值。setAmountsamount

假设您在 s 父组件中使用，则必须使用 props 将函数传递给组件。useState<Display />setAmounts<Display />

<Display amounts={amounts} setAmounts={setAmounts} />

onClick = e => {
  setAmounts(
    amounts.map(
      amount => ({ ...amount, tax: taxes ? 500 : 0 })
    );
  );
}

上一个：Vue 组件中的道具是可变的吗？

下一个：javascript 是否存在异步循环的可变并发问题