javascript - 如何在没有唯一键警告的情况下使用 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是明确的 <React.Fragment>组件(<> 是 short hand 的)。

React Docs - Keyed Fragments :

Fragments declared with the explicit <React.Fragment> syntax may havekeys. A use case for this is mapping a collection to an array offragments — for example, to create a description list:

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

key is the only attribute that can be passed to Fragment. In thefuture, we may add support for additional attributes, such as eventhandlers.