React子组件更新localValue致父组件Prop同步变化的原因问询

你遇到的问题核心是JavaScript引用类型的浅拷贝导致的关联修改，具体拆解如下：

1. 引用类型的传递特性
   passThisProp是二维数组，属于引用类型。当你执行const [localValue, setLocalValue] = useState(prop)时，localValue并没有拿到一个全新的数组，而是和父组件的passThisProp指向了内存中同一个数组对象。

2. 浅拷贝的局限性
   你在updateProp里用const arr = [...prop]做的是浅拷贝：这种方式只会复制外层数组的引用，内层的子数组依然和原prop里的子数组指向同一个内存地址。所以当你执行arr[i][j] = count.toString()时，本质上是直接修改了原数组里的子数组元素，父组件的prop自然会跟着变化。

3. 解决方案：深拷贝断开引用
   要让localValue完全独立于父组件的prop，需要对二维数组做深拷贝，确保内层数组也被复制。有两种常见方式：

   • 初始化state时就做深拷贝：

     // 用map复制外层数组，同时复制每个内层数组
     const [localValue, setLocalValue] = useState(prop.map(subArr => [...subArr]))
     

   • 在updateProp函数里做深拷贝：

     function updateProp(prop: string[][]) {
         // 深拷贝二维数组
         const arr = prop.map(subArr => [...subArr]);
         arr[i][j] = count.toString();
         return arr;
     }
     

   这样修改localValue时，就只会影响子组件内部的状态，不会再联动父组件的prop了。

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