react-multi-carousel组件列表子项key属性警告问题求助

使用react-multi-carousel库时触发了「Each child in a list should have a unique "key" prop」警告，已尝试在map循环内的div、Link、Product组件添加key，甚至给Carousel组件加随机key，但警告依然存在。测试用key来自本地文件（后续将从数据库获取，所有数据均有唯一id），警告指向Slideshow2组件的顶层渲染调用。

相关代码片段 #

data.js #

export const responsive = {
  superLargeDesktop: {
    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>

Slideshow2.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}`}> 
          <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>
  );
}

问题定位与修复 #

1. 空Fragment未承载key #

在Slideshow2的map循环中，你用空Fragment(<></>)包裹元素，但React要求key必须绑定在map返回的顶层元素上，空Fragment无法承载key，导致React无法识别每个列表项的唯一性。

修复方式：直接移除多余的空Fragment，将key绑定到顶层的div上（因为Fragment内只有一个div，Fragment本身无意义）：

const product = productData.map((item) => (
  <div key={item.id}>
    <Link href={`/${item.id}`}> 
      <Product
        name={item.name}
        url={item.imageurl} // 修正：data中字段为imageurl，原代码写了url
        price={item.price}
        description={item.description} // 修正：data中字段为description，原代码写了desc
        id={item.id} // 给Product传递id，供子组件使用（如果需要）
      />
    </Link>
  </div>
));

2. 多余key与变量引用错误 #

• Link、Product组件不需要额外加key，key只需在map的顶层元素上声明一次即可。
• Product组件中使用了未定义的item变量，应替换为props.id；此外，子组件内部的非列表元素不需要加key，完全是冗余操作。

修改后的Product.js：

"use client";

import React from "react";

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

3. 移除Carousel的随机key #

给Carousel添加Math.random()作为key会导致组件频繁无意义重渲染，直接删除该key即可。

内容的提问来源于stack exchange，提问作者leonSantoz