轮播 - 警告：列表中的每个子项都应该有一个唯一的“key”道具

Question

我遇到了这个问题，通常解决方案很简单，但在这种情况下它似乎与这个库有关。我知道我不应该使用文件中的密钥，但稍后它将来自数据库。

库：从“react-multi-carousel”导入Carousel；

警告：列表中的每个子项都应该有一个唯一的“key”道具。

使用检查顶级渲染调用。请参阅 https://reactjs.org/link/warning-keys 了解更多信息。 在 Slideshow2 (webpack-internal:///(ssr)/./app/components/Carroussel/home/Slideshow2.jsx:21:23) 懒惰时 在div 在div 在 InnerLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:240:11) 在 RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:71

我使用 data.js 仅用于测试。你知道问题出在哪里吗？一切都有一个唯一的ID。

数据.js

export const responsive = {
  superLargeDesktop: {
    // the naming can be any, depends on you.
    breakpoint: { max: 4000, min: 1024 },
    items: 5,
    slidesToSlide: 1,
  },
  desktop: {
    breakpoint: { max: 1024, min: 800 },
    items: 4,
  },
  tablet: {
    breakpoint: { max: 800, min: 464 },
    items: 2,
  },
  mobile: {
    breakpoint: { max: 464, min: 0 },
    items: 1,
  },
};

export const productData = [
  {
    id: 1,
    imageurl:
      "https://images.unsplash.com/photo-1560769629-975ec94e6a86?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fHByb2R1Y3RzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
    name: "Colorful sneakers",
    price: "19.99£",
    description: "Some text about the product..",
  },
];

基本上我有这样的结构：

page.js

      <div className="px-5">
        <SwiperCard images={indexFiles.frontmatter.images} />
      </div>

SwiperCard.js

    <div className="px-5">
      <Slideshow2 images={images.images}></Slideshow2>
    </div>

幻灯片2.js

"use client";

import "../home/styles.css";
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
import Product from "../home/Product";
import { productData, responsive } from "../home/data";
import Link from "next/link";

export default function Slideshow2({ images }) {
  const product = productData.map((item) => (
    <>
      <div key={item.id}>
        <Link key={item.id} href={`/${item.id}`}>
          {" "}
          {/* Use key on Link component */}
          <Product
            key={item.id}
            name={item.name}
            url={item.url}
            price={item.price}
            description={item.desc}
          />
        </Link>
      </div>
    </>
  ));

  return (
    <>
      <Carousel
        key={Math.random()}
        transitionDuration={400}
        autoPlay={true} 
        infinite={true}
        autoPlaySpeed={5000}
        responsive={responsive}
      >
        {product}
      </Carousel>
    </>
  );
}

和product.js

"use client";

import React from "react";

export default function Product(props) {
  return (
    <div className="card" key={props.id + "div"}>
      <img
        key={item.id + "img"}
        className="product--image"
        src={props.url}
        alt="product image"
      />
      <h2 key={item.id + "h2"}>{props.name}</h2>
      <p className="price" key={item.id + "p1"}>
        {props.price}
      </p>
      <p key={item.id + "p2"}>{props.description}</p>
      <p key={item.id + "p3"}>
        <button key={item.id + "button"}>Go for it</button>
      </p>
    </div>
  );
}

如有任何帮助，我们将不胜感激。 谢谢！

Answer 1

const product = productData.map((item) => (
  <>
    <div key={item.id}>
      <Link key={item.id} href={`/${item.id}`}>

键需要位于最外面的元素上，在本例中是片段。您将需要使用片段的普通形式来添加密钥：

import React, { Fragment } from 'react';
// ...

const product = productData.map((item) => (
  <React.Fragment key={item.id}>
    <div>
      <Link href={`/${item.id}`}>