React项目实战 | 修复Table可展开行，点击一个全部展开

问题分析

Table 组件需要唯一的 rowKey 来正确管理展开状态。

原因详解

1. 虚拟DOM diff 算法依赖

React 使用虚拟DOM diff算法来高效更新UI。当Table数据更新时，React需要：

识别哪些行是新增的、哪些是删除的、哪些是更新的
正确保持展开/收起状态
如果没有唯一key，React无法准确追踪每行的状态

2. 展开状态管理

Table组件的展开状态是基于 rowKey 来管理的：

javascript 复制代码

// 内部类似这样的结构
expandedRowKeys = ['id1', 'id3', 'id5']

如果没有唯一id，点击展开时可能出现：

多个行同时展开（主包遇到的bug）
展开状态错乱
无法正确收起

3. 性能优化

唯一key帮助React：

减少不必要的重渲染
提高diff算法效率
准确更新特定行的展开状态

解决方案对比

方案一：使用 uuid

javascript 复制代码

import { v4 as uuidv4 } from 'uuid';

const dataWithId = recordData.list.map(item => ({
  ...item,
  id: uuidv4() // 全局唯一
}));

优点：绝对唯一

缺点：需要额外依赖包

方案二：时间戳+随机数

javascript 复制代码

const dataWithId = recordData.list.map(item => ({
  ...item,
  id: `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`
}));

优点：无依赖

缺点：极低概率重复（通常可接受）

方案三：使用数据中的唯一字段&字段拼接

javascript 复制代码

// 如果数据本身有唯一字段
<Table rowKey="user_id" />

// 或者组合多个字段、data接口数据
const dataWithId = data.map(item => ({
  ...item,
  id: `${item.user_id}-${item.timestamp}`
}));

最佳实践

javascript 复制代码

// 推荐：优先使用数据中的业务ID
// 
const dataWithId = recordData.list.map((item, index) => ({
  ...item,
  id: item.id || item.user_id || `row-${index}-${Date.now()}`
}));

<Table
  rowKey="id"
  columns={columns}
  expandable={{
    expandedRowRender: record => (
      <p style={{ margin: 0 }}>{record.change_content}</p>
    ),
    rowExpandable: record => record.change_content && record.change_content !== ''
  }}
  dataSource={dataWithId}
  pagination={false}
/>

正常表格数据都应有ID，没有去找后端要(狗头

那话又说回来了，真没招了就选择引入UUID或者时间戳+随机数的方法

总结

根本原因 ：Table组件依赖唯一的 rowKey 来正确管理每行的展开状态和进行高效的虚拟DOM diff。

修复核心：确保每行数据都有一个唯一标识，让React能够准确追踪和管理每行的状态。