React.js + antd Grid:“列表中的每个子项都应该有一个唯一的“key”属性”错误

问题描述 投票:0回答:1

我必须使用 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 并为此使用不同的组件?

reactjs key antd array-map
1个回答
0
投票

React 使用键来跟踪 dom 中的组件。

来自文档:https://react.dev/learn/rendering-lists

Keys 告诉 React 每个组件对应哪个数组项,以便稍后可以匹配它们。如果您的数组项可以移动(例如由于排序)、插入或删除,这一点就变得很重要。精心选择的键有助于 React 推断究竟发生了什么,并对 DOM 树进行正确的更新。

所以,你错了:

在我看来,行/列组件并不关心键。

所有列表元素都应该添加一个键,听起来好像您一直在创建行和列的“列表”,而没有在它们上添加键。

我不知道你的

settingsFileIndex
中有什么,但你为行和列组件设置唯一键的方向是正确的。您不必切换组件,只需正确添加唯一的密钥即可。

© www.soinside.com 2019 - 2024. All rights reserved.