如何对需要作为props传递的对象进行不可变更新？

不可变更新方案 #

你原有写法的核心问题是直接修改了原有amount对象的属性，且没有更新状态的引用，既属于可变操作污染原数据，也会导致子组件无法触发重渲染。

正确的实现方式是通过map返回新数组，同时为每个元素生成新的对象副本，仅在新对象上修改属性，最后用新数组替换原有的状态：

函数组件写法 #

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

<Display amounts={amounts} />

类组件写法 #

onClick = e => {
  const newAmounts = this.state.amounts.map(amount => ({
    ...amount,
    tax: taxes ? 500 : 0
  }));
  this.setState({ amounts: newAmounts });
}

<Display amounts={this.state.amounts} />

注意事项 #

如果amount对象存在深层嵌套的属性，需要对嵌套层级做对应深拷贝处理，避免修改原对象的嵌套属性。上述方案针对一级属性的场景已经完全符合不可变要求，不会修改原数据，同时React可以通过引用变化正确触发组件重渲染。

内容的提问来源于stack exchange，提问作者Chandrika