Reactjs 列表应该有一个唯一的关键props

即使我放了一把 keys ，我还是收到了这个错误. REACT_DevTools_Backend.js:4026警告:列表中的每个子元素都应该有唯一的"key"props . Shows here a picture of the error个

此处显示了代码:

  return (
<div>
  <div style={{ textAlign: "center" }}>
    {players?.length > 0 && (
      <div style={{ marginTop: "2rem" }}>
          <h2>Results "{query}"</h2>
          <TableContainer
            component={Paper}
            style={{
              marginLeft: "auto",
              marginRight: "auto",
              width: "90%",
            }}
          >
            <Table sx={{ minWidth: 350 }} aria-label="simple table">
              <TableHead>
                <TableRow>
                  <TableCell>Full Name</TableCell>
                  <TableCell>Club</TableCell>
                  <TableCell>Nation</TableCell>
                  <TableCell>Position</TableCell>
                  <TableCell>Age</TableCell>
                  <TableCell>Market Value</TableCell>
                  <TableCell>Favorite</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {players.map((item) => {
                  return <TableRow
                  key={item.id}
                  sx={{
                    "&:last-child td, &:last-child th": { border: 0 },
                  }}
                  style={{ textAlign: "center" }}
                >
                  <TableCell>
                    <ListItem>
                      <Link
                        onClick={() => pickPlayer(item.id)}
                        style={{ textDecoration: "none" }}
                        to={`/player/${item.id}`}
                      >
                        {item?.img !== "https://img.a.XXX.technology/portrait/header/default.jpg?lm=1" &&
                        <img
                        src={item?.img}
                        alt={item?.displayName}
                        style={{ marginRight: "5px" , width: '2.5rem' , borderRadius: '80%' }}
                      />
                        }
                        {item?.img === "https://img.a.XXX.technology/portrait/header/default.jpg?lm=1" &&
                        <img
                        src={'https://www.seekpng.com/png/full/202-2024994_profile-icon-profile-logo-no-background.png'}
                        alt={item?.displayName}
                        style={{ marginRight: "5px" , width: '3rem'}}
                      />
                        }
                        <span style={{ verticalAlign: "1rem" }}>
                          {item?.displayName}
                        </span>
                      </Link>
                    </ListItem>
                  </TableCell>
                  <TableCell>
                    <ListItem>
                      <img
                        src={`https://tmssl.akamaized.net/images/wappen/head/${item?.imgId}.png?lm=1457423031`}
                        alt={item?.club}
                        title={item?.club}
                        style={{ marginRight: "2px" ,  width: '1.7rem' }}
                      />{" "}
                      {item?.club}
                    </ListItem>
                  </TableCell>
                  <TableCell>
                    {item?.nationality.map((item) => {
                      return (
                        <>
                          <ListItem key={uuidv4()}>
                            <img
                              key={uuidv4()}
                              src={item?.flag}
                              alt={item?.title}
                              title={item?.title}
                              style={{ marginRight: "5px" , width : '1.7rem' , borderRadius : '10rem' }}
                            />{" "}
                            {item.title}
                          </ListItem>
                        </>
                      );
                    })}
                  </TableCell>
                  <TableCell>
                    <ListItem>{item.position}</ListItem>
                  </TableCell>
                  <TableCell>
                    <ListItem>{item.age}</ListItem>
                  </TableCell>
                  <TableCell>
                    <ListItem>{item.tmValue}</ListItem>
                  </TableCell>
                  <TableCell>
                    <ListItem>
               
                 {
                  favoriteLoading ? "loading..." :
                  <>
                  {
                    favorite.find(fav => fav.playerId === item.id && fav.scoutId === auth._id) !== undefined ? <Favorite style={{ color: "red" }} /> : <FavoriteBorder style={{ color: "red" }} />
                  }
                  </>
                  }
                    </ListItem>
                  </TableCell>
                </TableRow>
                }
                )}
              </TableBody>
            </Table>
          </TableContainer>
          </div>
      )}
      {playersLoading && players?.length === 0 ? progress : players?.length === 0 && <h3>{query} Not Found</h3> }
      {playersLoading && players?.length > 0 && progress}
      {playersLoading && players?.length === 0 ? null : players.length <= 3 && <div style={{height : "20vh"}}>
      {
        !underThree && <h4>Scroll Down to load more</h4>
      }
      </div>}
  </div>
</div>
);

我们能做些什么？ 到目前为止，我甚至try 使用外部动态UUID来判断ID是否重复，但事实并非如此. 因为在我看来一切都很好.