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

Question

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

Answer 1

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

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

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

所以，你错了：

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

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

我不知道你的

settingsFileIndex

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