如何添加键到您在React中渲染的数组

Question

我的问题是，“材料用户界面”中的菜单无法让我将<MenuItem />分组到<React.Fragment />中，如下所示：

<Menu>
  <React.Fragment>
    <MenuItem />
    <MenuItem />
    <MenuItem />
  </React.Fragment>
</Menu>

。如果这样做，我会收到以下错误消息：

Warning: Material-UI: the MenuList component doesn't accept a Fragment as a child. Consider providing an array instead.

因此，由于这个原因，我尝试将所有<MenuItem />都添加到数组中：

const menuItems = [];
menuItems.push(<MenuItem />);
menuItems.push(<MenuItem />);
menuItems.push(<MenuItem />);

然后在渲染器中执行以下操作：

render() {
  const menuItems = [];
  ...
  return (
    <Menu>
      {menuItems}
    </Menu>
  );
}

这很好用。它呈现了我所有的<MenuItem />，但是我得到了这个警告，我想修复：

warning.js:33 Warning: Each child in an array or iterator should have a unique "key" prop.