React父子组件传对象数组：修改本地变量影响父组件State的问题

嘿，我来帮你把这两个问题理清楚～

首先得解释你最初遇到问题的核心原因：数组和对象都是引用类型，当你直接把props.Arr赋值给this.arr时，其实只是复制了内存地址——this.arr和props.Arr指向的是同一个数组，数组里的每个对象也是同一个引用。所以你修改this.arr[0].val的时候，本质上是在修改原props和父组件state里的那个对象，自然会导致两者同步变化。

你现在写的copyArrayOfObjects方法是做了浅拷贝：遍历原数组，用对象展开运算符{...arrToCopy[i]}为每个对象创建一个独立的副本，再把这些新对象放进新数组里。这种做法在你的场景里（数组中的对象都是单层结构，没有嵌套的复杂对象）是完全正确的！这样this.arr就是一个全新的数组，里面的每个对象也都是独立的新对象，修改它的内容就不会影响到原props和父组件的state了。

小补充：如果你的数组对象里还有嵌套层级（比如{id: 1, val: {nested: 11}}），那浅拷贝就不够用了，需要做深拷贝（比如递归遍历所有嵌套对象，或者用JSON.parse(JSON.stringify(arrToCopy))——但后者对函数、Symbol这类特殊类型不兼容，需要注意）。不过就你当前的代码场景来说，浅拷贝完全足够。

当然不是！在React开发中，用对象数组作为state是非常常见且合理的做法——比如列表数据、表格行数据、多选选项组等等，几乎是日常开发的标配。

真正需要注意的不是state的结构复杂度，而是要遵循React的不可变（Immutable）更新原则：永远不要直接修改原state里的对象或数组，而是通过创建新的对象/数组来更新state。比如父组件如果需要修改这个数组，正确的写法应该是这样：

this.setState(prevState => ({
  arr: prevState.arr.map(item => 
    item.id === 1 ? {...item, val: item.val * 2} : item
  )
}))

这种方式既保证了state的不可变性，也能让React正确检测到state变化并触发组件重新渲染。

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