共计 926 个字符,预计需要花费 3 分钟才能阅读完成。
react + ant design
应用 table 时,呈现了报错,错误信息如下
Each child in a list should have a unique“key“prop.
呈现这个问题,table 的每一行须要一个 ”key”。
如果 table 的 dataSource[i].key 这个属性不存在
能够在 Table 上增加一个 rowKey
rowKey 能够是一个字符串,指定 dataSource[i]上的一个属性
也能够是一个函数,返回 dataSource[i]上的一个 key
举个例子:
代码起源是 ant design 官网的 table (ts 版本)
https://ant.design/components…
“ 简略的表格,最初一列是各种操作。”
// ↓ 去掉了官网代码中的 data[i].key
const data: DataType[] = [
{
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer'],
},
{
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
tags: ['loser'],
},
{
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
tags: ['cool', 'teacher'],
},
];
const App: React.FC = () => <Table columns={columns} dataSource={data} />;
// ↑ 下面的写法会报错 Each child in a list should have a unique“key“prop.
// 改
1、const App: React.FC = () =>
<Table columns={columns} dataSource={data} rowKey={"name"} />;
// 或者
2、const App: React.FC = () =>
<Table columns={columns} dataSource={data} rowKey={item => item.name} />;
同步更新到本人的语雀
https://www.yuque.com/diracke…
正文完