列表中的每個孩子都應該有一個唯一的“關鍵”道具自定義組件錯誤

Question

我正在映射一個數組並為數組中的每個索引呈現一個自定義卡組件。 但是，我收到錯誤“列表中的每個孩子都應該有一個唯一的“關鍵”道具” 1 。 雖然，我將索引作為鍵傳遞。 我嘗試過使用 React.fragment 並將索引向下傳遞給卡片組件並在那里添加密鑰。 兩種方法仍然拋出相同的錯誤。

主要部件

import React from "react";
import { useRouter } from "next/router";
import { Button, Container } from "@mui/material";
import { makeStyles } from "@mui/styles";
import { InstructionsCard } from "../layout/directory";
import {
  RiNumber1 as OneIcon,
  RiNumber2 as TwoIcon,
  RiNumber3 as ThreeIcon,
} from "react-icons/ri";

function InstructionSection() {
  const router = useRouter();
  const classes = useStyles();

  const instructions = [
    {
      id: 1,
      icon: OneIcon,
      title: "step one",
      text: [
        "Navigate to the",
        <Button
          onClick={() => router.push("/requirements")}
          size="small"
          style={{ margin: "5px" }}
          variant="outlined"
          color="inherit"
        >
          requirements
        </Button>,
        "page for our most frequently asked questions and specific requirements before booking any activity. ",
      ],
    },
    {
      id: 2,
      icon: TwoIcon,
      title: "step two",
      text: [
        "Find the activity you are interested in and read through the information carefully. Be sure to fully understand the,",
        <Button
          onClick={() => router.push("/#upgrades")}
          size="small"
          style={{ margin: "5px" }}
          variant="outlined"
          color="inherit"
        >
          entry fee
        </Button>,
        " and",
        <Button
          onClick={() => router.push("/#upgrades")}
          size="small"
          style={{ margin: "5px" }}
          variant="outlined"
          color="inherit"
        >
          upgrade
        </Button>,
        " packages",
      ],
    },
    {
      id: 3,
      icon: ThreeIcon,
      title: "step three",
      text: [
        "Please, be sure to verify we are ",
        <Button
          onClick={() => router.push("/locations")}
          size="small"
          style={{ margin: "5px" }}
          variant="outlined"
          color="inherit"
        >
          located
        </Button>,
        " in your area. Select an experience, date, time-slot, toggle any upgrades, and continue through checkout.",
      ],
    },
  ];

  return (
    <Container className={classes.root}>
      {/* instructions iteration */}
      {instructions.map((_instruction, index) => {
        return (
          <React.Fragment key={index}>
            <InstructionsCard item={_instruction} />
          </React.Fragment>
        );
      })}
    </Container>
  );
}

// custom styles
const useStyles = makeStyles((theme) => ({
  root: {
    [theme.breakpoints.down("md")]: {
      flexDirection: "column",
    },
    width: "100%",
    display: "flex",
    justifyContent: "space-evenly",
  },
}));

export default InstructionSection;

卡片組件

import { makeStyles } from "@mui/styles";
import { Card, CardContent, Typography, Divider } from "@mui/material";

const InstructionsCard = ({ item }) => {
  const classes = useStyles();
  const Icon = item.icon;

  return (
    <Card className={classes.root}>
      <CardContent>
        <Icon className={classes.icon} />
        <Typography className={classes.title} variant="h5" component="h6">
          {item.title.toUpperCase()}
        </Typography>
        <Divider className={classes.divider} />
        <Typography
          variant="subtitle1"
          component="p"
          sx={{ mb: 1.5 }}
          color="text.secondary"
        >
          {item.text}
        </Typography>
      </CardContent>
    </Card>
  );
};

const useStyles = makeStyles((theme) => ({
  root: {
    [theme.breakpoints.down("md")]: {
      margin: theme.spacing(4, 0, 4, 0),
    },
    background: theme.palette.primary.main,
    borderRadius: theme.spacing(5),
    padding: theme.spacing(2),
    margin: theme.spacing(5),
    width: "100%",
    textAlign: "center",
    boxShadow: `0px 0px 10px 10px ${theme.palette.offset.main}`,
  },
  icon: {
    background: theme.palette.secondary.dark,
    width: "50px",
    height: "50px",
    padding: "15px",
    borderRadius: theme.spacing(5),
  },
  divider: {
    background: theme.palette.secondary.dark,
    padding: "2px",
    width: "20%",
    margin: theme.spacing(1, "auto", 1, "auto"),
  },
  title: {
    fontWeight: 800,
  },
}));

export default InstructionsCard;

Answer 1

在您的主要組件中進行這樣的更改

React.Fragment 我們需要使用一次不能多次使用

return (
    <Container className={classes.root}>
      <React.Fragment>
        {instructions.map((_instruction, index) => {
          <InstructionsCard key={index} item={_instruction} />;
        })}
      </React.Fragment>
    </Container>
  );

謝謝你