React中useImmerReducer更新深层嵌套数组时出现重复项问题排查

1. 列表渲染的key值错误 #

这是导致重复项显示最常见的原因。如果你渲染baseTables或configs列表时，用数组索引当作key（比如key={index}），当数组内对象被修改时，React的DOM diff算法无法正确识别元素变化，就会出现重复渲染的情况。

解决办法：
给列表项用唯一且稳定的标识当key，比如每个baseTables对象的专属id（如果有的话）：

{state.configs[configIndex].baseTables.map((table) => (
  <TableItem 
    key={table.id} // 用唯一id替代索引
    data={table}
  />
))}

2. configIndex/btIndex的闭包陷阱 #

如果configIndex或btIndex是组件内部的状态或变量，很可能存在闭包问题：触发EDIT动作时用的是旧的索引值，导致修改了错误项，同时配合组件渲染逻辑的问题，最终出现重复项。

解决办法：
把configIndex和btIndex作为action的payload传给reducer，别直接在reducer里引用外部变量：

// 触发动作时传递索引和新值
dispatch({
  type: 'EDIT',
  payload: {
    configIndex: 当前配置项索引,
    btIndex: 当前表格项索引,
    newName: 'NameChanged'
  }
})

// reducer里用payload里的索引
const reducer = (draft, action) => {
  switch(action.type) {
     case 'EDIT':
        const { configIndex, btIndex, newName } = action.payload;
        draft.configs[configIndex].baseTables[btIndex].name = newName;
     break
    // 其他case
  }
}

这样能避免闭包导致的索引过期，保证每次修改都精准定位到目标项。

3. Immer使用中的隐性逻辑冲突 #

你提到对象都被正确代理，但如果reducer里其他case的逻辑有问题，比如不小心在别的操作里错误执行了push或修改数组结构的代码，也可能影响EDIT动作的结果，导致数组项重复。

排查办法：
先注释掉其他case的逻辑，只保留EDIT动作测试。如果问题消失，再逐个排查其他case的代码。

4. 组件不必要重渲染 #

如果父组件或列表项组件没正确用memo/useMemo优化，可能会导致组件重复渲染，视觉上出现“重复项”的错觉（实际是同一组件被多次渲染）。

解决办法：
用React.memo包裹列表项组件，避免无意义的重渲染：

const TableItem = React.memo(({ data }) => {
  // 组件内容
})

内容的提问来源于stack exchange，提问作者Wagner D'Amaral