如何使用 React 渲染 Material UI 网格而不出现唯一键警告

Question

我在这个项目中使用 React 和 Material UI，需要渲染一个网格，其中行来自数据数组，列包含特定信息，如下所示：

<Grid container>
  {myData.map((record) => (
    <>
      <Grid item>{record.field1}</Grid>
      <Grid item>{record.field2}</Grid>
      <Grid item>{record.field3}</Grid>
    </>
  )}
</Grid>

这当然会导致 React 警告列表中的项目没有唯一键。

问题是这< key={index}>在 React 中是无效的，并且<>用实际的标签替换，<div>例如会弄乱网格；它期望网格项直接包含在网格容器中。

有什么办法可以解决这个问题吗？

Answer 1

您可以将key\'s 传递给显式<React.Fragment>组件（这<>是其简写）。

\n

React 文档 - 带键的片段：

\n

\n

使用显式 <React.Fragment> 语法声明的片段可能有\n键。一个用例是将集合映射到\n片段 \xe2\x80\x94 数组，例如，创建描述列表：

\n

function Glossary(props) {\n  return (\n    <dl>\n      {props.items.map(item => (\n        // Without the `key`, React will fire a key warning\n        <React.Fragment key={item.id}>\n          <dt>{item.term}</dt>\n          <dd>{item.description}</dd>\n        </React.Fragment>\n      ))}\n    </dl>\n  );\n}\n

\n

key 是唯一可以传递给 Fragment 的属性。将来，我们可能会添加对其他属性的支持，例如事件处理程序。

\n

\n