javascript - React Material UI Drawer - 警告列表中的每个 child 都应该有一个唯一的 "key" Prop

Question

我正在使用 React MUI Drawer，虽然我已经在 List 中为 child 提供了 key prop，但当 react mui 抽屉打开时仍然收到此警告消息。我附上了我编写的一些屏幕截图和示例代码。


AppBarWithDrawer 组件

import React from "react";
// Components
import { Box, AppBar, Toolbar } from "material-ui";
import DrawerMenu from "../navbar/drawerMenu";

export default function appBarWithDrawer() {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static">
        <Toolbar>
          <DrawerMenu />
        </Toolbar>
      </AppBar>
    </Box>
  );
}

DrawerMenu 组件

import React from 'react';
// Components
import { Button, Box, Drawer } from 'material-ui';
import CustomIcon from 'material-ui-icons';
import DrawerMenuList from './drawerMenuList';
// Constants 
import { MENU_ICON } from 'material-ui-icon-types/iconTypes';
import { DASHBOARD_MENU_ICON_THEME } from 'material-ui-icon-types/themeTypes';

export default function DrawerMenu () {

    // Drawer menu type
    const LEFT_MENU_TYPE = 'left';

    const Icon = ({ iconType }) => {
        return (<CustomIcon icon={iconType} theme={DASHBOARD_MENU_ICON_THEME} />);
    };

    // Left Drawer Menu status
    const [state, setState] = React.useState({
        left: false
    });

    const toggleDrawer = (anchor) => (event) => {
        if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
            return;
        }
        setState({ ...state, [anchor]: !state.left });
    };

    const list = (anchor) => (
        <Box
            sx={{ width: 240 }}
            role="presentation"
            onClick={toggleDrawer(anchor)}
            onKeyDown={toggleDrawer(anchor)}
        >
            <DrawerMenuList />
        </Box>
    );


    return (
            <div>
                <Button className="navHamburgerButton" onClick={toggleDrawer(LEFT_MENU_TYPE)}> 
                   <Icon iconType={MENU_ICON} />
                </Button>
                <Drawer
                    anchor={LEFT_MENU_TYPE}
                    open={state[LEFT_MENU_TYPE]}
                    onClose={toggleDrawer(LEFT_MENU_TYPE)}
                >
                    {list(LEFT_MENU_TYPE)}
                </Drawer>
            </div>
    );
}

如图所示，我已将每个子项中的关键 Prop 包含在以下组件的列表中，但仍然收到警告。
DrawerMenuList 组件

import React from 'react';
import { List, Divider, ListItem, ListItemIcon, ListItemText } from 'material-ui';
import CustomIcon from 'material-ui-icons';
import {
    SCHOOL_OUTLINED_ICON, SPEED_OUTLINED_ICON, FORMAT_LIST_NUMBERED_RTL_ICON,
    CREATE_OUTLINED_ICON
} from 'material-ui-icon-types/iconTypes';
import { DASHBOARD_MENU_ICON_THEME } from 'material-ui-icon-types/themeTypes';

export default function DrawerMenuList () {

    // Reusable icon for the Drawer List. The "DASHBOARD_MENU_ICON_THEME" theme is applied.
    const Icon = ({ iconType }) => {
        return (<CustomIcon icon={iconType} theme={DASHBOARD_MENU_ICON_THEME} />);
    };

    const drawerItems = [
        {
            id: Math.random(),
            name: 'Dashboard',
            icon: SPEED_OUTLINED_ICON
        },
        {
            id: Math.random(),
            name: 'Syllabus',
            icon: FORMAT_LIST_NUMBERED_RTL_ICON
        },
        {
            id: Math.random(),
            name: 'Notes & Highlights',
            icon: CREATE_OUTLINED_ICON
        },
        {
            id: Math.random(),
            name: 'Virtusal Classroom',
            icon: SCHOOL_OUTLINED_ICON

        }
    ];

    return (
            <List>
                {drawerItems.map((item) => (
                    <ListItem button key={item.id}>
                        <ListItemIcon>
                            <Icon iconType={item.icon} />
                        </ListItemIcon>
                        <ListItemText primary={item.name} />
                    </ListItem>
                ))}
            </List>
    );
}

当我在浏览器中调试时，执行以下部分时会触发错误

Answer 1

此错误是因为您没有按应有的方式向 child 提供 key 。
我遇到了同样的错误，我在 MUI 的示例中找到了解决方案。
我会给你留下 documentation 的链接和 examples

在这张图片中，您可以看到 anchor 设置在覆盖整个按钮和抽屉的 Fragment 中。
由此:

return (
        <List>
            {drawerItems.map((item) => (
                <ListItem button key={item.id}>
                    <ListItemIcon>
                        <Icon iconType={item.icon} />
                    </ListItemIcon>
                    <ListItemText primary={item.name} />
                </ListItem>
            ))}
        </List>
);

你可以试试这个:

return (
   <List>
       {drawerItems.map((item) => (
        <React.Fragment key={item.id}>
           <ListItem button>
               <ListItemIcon>
                   <Icon iconType={item.icon} />
               </ListItemIcon>
               <ListItemText primary={item.name} />
           </ListItem>
         </React.Fragment>
       ))}
   </List>
);