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回答
-
你好,这里是要给Table组件加一个rowKey属性。我的源代码里有,但是视频课程里没有讲,我会给补上。谢谢提醒
012021-03-07
相似问题