Antd Table加载Skeleton时出现Key警告问题求助

问题描述 #

React DevTool中查看Antd Table结构时，已给组件设置key，但仍触发以下警告：

Warning: Each child in a list should have a unique "key" prop. Check the render method of Body.

尝试给Table添加rowKey属性后，问题仍未解决。

代码问题分析 #

提供的代码片段如下：

// other code here
} else if (this.state.processing) {
    let dataSke = [];
    for (let i = 0; i < 1; i++) {
      let y = {};
      y.title = <Skeleton.Input key={uuidv4()} style={{ width: "300px" }} />;
      y.topic_name = <Skeleton.Input key={uuidv4()} style={{ width: "200px" }} />;
      y.type = <Skeleton.Input key={uuidv4()} style={{ width: "100px" }} />;
      dataSke.push(y);
    }
    return (
      <>
        <Table
        rowKey={obj => obj.id}
          columns={this.columns}
          dataSource={dataSke}
          rowSelection={rowSelection}
        />
      </>
    );
// other code here

核心问题：

• rowKey配置为取obj.id，但dataSke中的每个对象y并没有id字段，Antd Table无法获取到唯一的行标识，因此触发警告。
• 给Skeleton.Input添加的key属于冗余操作，这些组件并非React列表循环的直接子元素，对解决行key警告毫无作用。

解决方案 #

有两种可行的修复方式：

方式一：给数据项添加唯一id（推荐）

给每个y对象添加唯一id字段，确保rowKey能正确获取到值：

for (let i = 0; i < 1; i++) {
  let y = { id: uuidv4() }; // 生成唯一id
  y.title = <Skeleton.Input style={{ width: "300px" }} />; // 此处key可删除
  y.topic_name = <Skeleton.Input style={{ width: "200px" }} />;
  y.type = <Skeleton.Input style={{ width: "100px" }} />;
  dataSke.push(y);
}

保留原rowKey={obj => obj.id}配置即可。

方式二：修改rowKey为索引（临时方案）

若不想给数据添加id，可临时用数组索引作为行key（注意：数据顺序变化时可能引发渲染异常，仅适合临时场景）：

<Table
  rowKey={(obj, index) => index}
  columns={this.columns}
  dataSource={dataSke}
  rowSelection={rowSelection}
/>

额外说明 #

之前给Skeleton.Input设置的key完全没必要，因为这些组件是作为对象属性存在，并非列表循环的直接子元素，直接删除即可。

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