React嵌套表格展开多行时子组件ID非预期更新问题

你碰到的ID错乱问题完全是引用类型操作不当加硬编码逻辑导致的，具体有三个硬伤：

• 直接修改父组件传入的tableId数组：JS中数组是引用类型，你在渲染某一行时对tableId做push、直接修改索引位的操作，会直接改掉所有绑定了同一个数组引用的组件拿到的值，展开第二行时直接把原数组里存的第一行索引覆盖成1，先渲染的第一个子表自然会拿到错误的ID值。
• 子表ID生成逻辑硬编码：写死取tableId[1]当ID后缀，最多只能支持2层嵌套，再深的层级直接读错值。
• 路径截断逻辑本身有API错误：普通数组没有subarray方法，这是TypedArray的专属API，写在普通数组操作里本身就会抛错，而且硬编码截断前2位的逻辑完全不支持多层级复用。

核心原则只有一条：每一层向下传递路径时，必须创建独立的数组副本，绝对不能直接修改上层传入的原路径引用，子表ID用完整路径拼接，保证任意层级、任意数量展开行的ID全局唯一。

1. 替换父组件的路径生成逻辑 #

把原来那一大段判断数组长度、修改原数组、截断路径的代码全部删掉，只需要一行基于上层路径生成当前子表独立路径的代码：

// 渲染展开行时，生成传给子组件的tablePath
const tablePath = [...this.props.tableId, index];

这行代码用展开运算符对上层传入的路径做了浅拷贝，再追加当前行的索引，生成的是和原数组完全脱钩的新数组，当前行的路径修改不会影响任何其他已经渲染的行。

2. 替换子组件的ID生成逻辑 #

删掉原来写死取tableId[1]的写法，直接把完整路径用固定分隔符拼接成字符串当ID后缀，不管嵌套多少层都不会重复：

<Table
  className='table table-bordered border-dark hover'
  id={`ChildTable_${this.props.tableId.join('_')}`}
>
  {/* 表头、表体逻辑保持原样 */}
</Table>

按这个逻辑生成的ID会和表格的层级位置完全绑定：

• 第一层第1行的子表路径为[0]，对应ID ChildTable_0
• 第一层第1行下展开的第2行子表路径为[0,1]，对应ID ChildTable_0_1
• 第三层第3行的子表路径为[0,1,2]，对应ID ChildTable_0_1_2

3. 顶层组件初始化 #

最外层没有上层组件传tableId时，直接给初始值空数组即可，所有嵌套层级完全复用同一套组件代码，不需要做额外判断：

// 最顶层渲染表格组件时传入初始路径
<Parent tableId={[]} {/* 其余原有props保持不变 */} />

修复后你之前的ID错乱问题会直接解决：

• 展开第一行时，子组件拿到独立路径[0]，ID为ChildTable_0
• 展开第二行时，会生成全新的路径副本[1]，对应IDChildTable_1，完全不会修改第一行已经持有的路径引用，第一个子表的ID永远不会被篡改
• 不管嵌套多少层、同时展开多少行，每个子表的ID都是全局唯一的，依赖子表ID的其他功能模块不会再出现异常。

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