警告：列表中的每个孩子都应该有一个唯一的“关键”道具。 如何解决这个问题？

Question

Ive been using this project with out a problem and now all of a sudden I keep getting this error and it won't show my notes when I click on the my notes section. What do I have to do for it to go away. The backend is up and running and I can see the static data but it wont show on the app

 import { makeStyles } from '@mui/styles' import React from 'react' import { Drawer } from '@mui/material' import { Typography } from '@mui/material' import List from '@mui/material/List' import ListItem from '@mui/material/ListItem' import ListItemIcon from '@mui/material/ListItemIcon' import ListItemText from '@mui/material/ListItemText' import { AddCircleOutlineOutlined, SubjectOutlined } from '@mui/icons-material' import { useHistory, useLocation } from 'react-router-dom' import AppBar from '@mui/material/AppBar' import Toolbar from '@mui/material/Toolbar' import { format } from 'date-fns' import { red } from '@mui/material/colors' const drawerWidth = 240 // 500 - subtract this number from const useStyles = makeStyles((theme) => { return{ page: { background: '#E5E4E2', width: '100%', padding: theme.spacing(3) }, drawer: { width: drawerWidth }, drawerPaper: { width: drawerWidth }, root: { display: 'flex' //places the drawer side by side with the page content }, active: { background: '#E5E4E2' }, // title:{ // padding: theme.spacing(13), // alignItems: 'center' // }, }}) export default function Layout({ children }) { const classes = useStyles() const history = useHistory() const location = useLocation() const menuItems = [ { text: 'My Projects', icon: <SubjectOutlined color="secondary" />, path: '/' }, { text: 'Create Project', icon: <AddCircleOutlineOutlined color="secondary" />, path: '/create' } ] return ( <div className={classes.root}> {/* side drawer */} <Drawer className={classes.drawer} variant='permanent' //Lets MUI know we want it on the page permanently anchor="left" // position of drawer classes={{ paper: classes.drawerPaper}} > <div> <Typography variant="h5" sx={{textAlign: 'center'}}> Projects </Typography> </div> {/* List / Links */} <List> {menuItems.map(item => ( <div className={location.pathname == item.path? classes.active: null}> <ListItem key={item.text} button onClick={() => history.push(item.path)}> <ListItemIcon>{item.icon}</ListItemIcon> <ListItemText primary={item.text} /> </ListItem> </div> ))} </List> </Drawer> <div className={classes.page}> <div className={classes.toolbar}></div> {children} </div> </div> ) }

enter image description here

Answer 1

Updated

I'm sorry, of course, you should just move key to the parent div. I didn't notice it. Chris who answered in the comments is right and my answer was not needed. I rewrote the answer.

To have an unique key use index in map or like you did item.text if text is unique for each element in map.

menuItems.map((item,index) =>

The idea is that map has to contain unique key for each element. In result we have:

<div key={item.text} className={location.pathname == item.path ? classes.active : null}>

or

<div key={index} className={location.pathname == item.path ? classes.active : null}>

And you need to remove key from the List.

Hope this helps, Regards,

Answer 2

Your list item key in

ListItem key={item.text}

is not unique.

You have to change the value of the key so that it won't be duplicate with any other list item.