即使存在密钥，也会警告 "Each child in a list should have a unique "key" prop' (React + Material UI)

Question

我正在尝试使用 map 函数从 JSON 文件中获取数据，但我一直收到此错误 'Each child in a list should have a unique "key" prop'，即使我设置了 key={facts.id}。请问我怎样才能摆脱这个错误？其他一切正常。

import React from "react";
import ResponsiveAppBar from "./ResponsiveAppBar";
import Typography from "@mui/material/Typography";
import { styled } from "@mui/material/styles";
import Box from "@mui/material/Box";
import Paper from "@mui/material/Paper";
import Grid from "@mui/material/Grid";
import Facts from "../sources/facts.json";
import Data from "../sources/credits.json";

const Learn = () => {
  const Item = styled(Paper)(({ theme }) => ({
    backgroundColor: theme.palette.mode === "dark" ? "#1A2027" : "#fff",
    ...theme.typography.body2,
    padding: theme.spacing(2),
    textAlign: "center",
    color: theme.palette.text.secondary,
  }));
  return (
    <div>
      <ResponsiveAppBar />
      {Facts &&
        Facts.map((fact) => {
          return (
            <Box sx={{ flexGrow: 1 }}  style={{
              marginTop:50}}>
              <Grid 
                container
                spacing={2}
                elevation={9}
                justifyContent="center"
                style={{ margin: "auto" }}
              >
                <Grid item xs={8} >
                  <Item key={fact.id} >
                    <Typography
                      variant="h5"
                      gutterBottom
                      component="div"
                      style={{ fontWeight: 600 }}
                    >
                      {fact.id}. {fact.title}
                    </Typography>

                    <Typography variant="body1" gutterBottom>
                      {fact.content}
                    </Typography>
                  </Item>
                </Grid>
              </Grid>
              <br />
              <br />
            </Box>
          );
        })}
    </div>
  );
};

export default Learn;

Answer 1

您应该将 key 分配给您 return 的第一个元素：

return (
            <Box key={fact.id} sx={{ flexGrow: 1 }}  style={{
              marginTop:50}}>

Answer 2

我通过向 map 函数参数添加索引并将键设置为等于索引来使其工作。


Facts.map((fact, i) => {
          return (
            <Box sx={{ flexGrow: 1 }}  style={{
              marginTop:50} key={i}>

即使存在密钥，也会警告 "Each child in a list should have a unique "key" prop' (React + Material UI)

Warning "Each child in a list should have a unique "key" prop' even with the key present (React + Material UI)

reactjs

material-ui