Unique key的问题

来源:6-8 清除前面课程留下的警告信息

坡村小码哥

2021-03-06

老师好,我发现我还有一个Warning,是关于unique key的

Warning: Each child in a list should have a unique “key” prop.

我找了一下发现是在List组件中:

export const List = ({ list, users }: ListProps) => {
  return (
    <Table
      dataSource={list} //这里,list数组是project[],貌似react希望每一个project都能有自己的key
      columns={[
        {
          title: "名称",
          dataIndex: "name",
          sorter: (a, b) => a.name.localeCompare(b.name),
        },
        {
          title: "项目组",
          dataIndex: "organization",
        },
        {
          title: "负责人",
          render(value, project) {
            return (
              <span>
                {users.find((user) => user.id === project.personId)?.name ||
                  "未知"}
              </span>
            );
          },
        },
        {
          title: "创建日期",
          render(value, project) {
            return (
              <span>
                {project.created
                  ? dayjs(project.created).format("YYYY-MM-DD")
                  : ""}
              </span>
            );
          },
        },
      ]}
    />
  );
};

作为dataSource的project数组list好像没有key这个属性,导致了问题,但是list是直接从res.json(),转换过来的,难道我们要给遍历数组给每一个对象添加一个key属性吗。请问有没有更好的办法,还是说不是这个问题?

谢谢老师!

写回答

1回答

Nolan

2021-03-06

你好,这里是要给Table组件加一个rowKey属性。我的源代码里有,但是视频课程里没有讲,我会给补上。谢谢提醒//img.mukewang.com/szimg/604304100965f2b814200238.jpg

0
1
坡村小码哥
非常感谢!
2021-03-07
共1条回复

React17+Hook+TS4 优质实践,仿 Jira 企业级项目

解锁 React17 高阶用法,轻松应对大型复杂长周期项目

2691 学习 · 1236 问题

查看课程