我必须使用 Ant Design Grid 从数组内容动态渲染网格,我使用 _.map 方法来执行此操作,这会导致以下警告显示为 error 消息:
Warning: Each child in a list should have a unique "key" prop.
到目前为止我已经尝试了我能想到的一切。我已经开始修剪我的代码,直到达到以下目标,但我仍然收到相同的错误(或警告,我不确定它是什么)。
function SettingsContent (props) {
const {SettingsA, SettingsB} = props;
return (
<Row gutter={[12,0]}>
<Col span={12}>
<Row>
<Col span={24}>
SETTINGS A
</Col>
</Row>
<Row>
<Col span={24}>
{
SettingsA.map((settingsFile,settingsFileIndex)=>{
return(
<Row key={settingsFileIndex}>
</Row>
)
})
}
</Col>
</Row>
</Col>
</Row>
);
}
在我看来,行/列组件并不关心键。我能做些什么吗?或者我应该不使用 antd Row/Col 并为此使用不同的组件?
React 使用键来跟踪 dom 中的组件。
来自文档:https://react.dev/learn/rendering-lists
Keys 告诉 React 每个组件对应哪个数组项,以便稍后可以匹配它们。如果您的数组项可以移动(例如由于排序)、插入或删除,这一点就变得很重要。精心选择的键有助于 React 推断究竟发生了什么,并对 DOM 树进行正确的更新。
所以,你错了:
在我看来,行/列组件并不关心键。
所有列表元素都应该添加一个键,听起来好像您一直在创建行和列的“列表”,而没有在它们上添加键。
我不知道你的
settingsFileIndex
中有什么,但你为行和列组件设置唯一键的方向是正确的。您不必切换组件,只需正确添加唯一的密钥即可。