ReactJS出现意外警告：列表子元素需设置唯一key属性

警告核心原因 #

你遇到的React警告，问题出在data.activities的渲染逻辑上：

1. 测试用的checkData数组里，每个对象都没有activities属性，导致data.activities为undefined；虽然可选链?.避免了报错，但接口返回activities数据后会触发两个问题：
2. 若activities是字符串数组（如["徒步", "山地骑行"]），act是字符串类型，没有id属性，此时key={act.id}会取到undefined，React会警告列表项缺少唯一标识；
3. 若activities是对象数组，当前代码中label={act}直接渲染对象会显示[object Object]，同时如果对象没有唯一id，也会触发key警告。

针对性解决方案 #

情况1：activities是字符串数组

直接用字符串本身作为key（确保字符串无重复），正常渲染标签：

<div className="mt-3">
  {data.activities?.map((act) => {
    return <Chip className="mr-2 px-3" label={act} key={act} />;
  })}
</div>

情况2：activities是对象数组（含id和name字段）

先在测试数据中补充activities，保证测试时能正常渲染：

// 修改Packages.js中的checkData
let checkData = [
  {
    name: "ahmad",
    description: "this is description",
    price: 5,
    days: 5,
    nights: 9,
    noOfPersons: 9,
    destination: "England",
    featuredImg: "https://media.gettyimages.com/photos/castle-combe-in-the-fall-wiltshire-england-picture-id157006201?s=612x612",
    activities: [{id: 1, name: "徒步"}, {id: 2, name: "古堡观光"}]
  },
  {
    name: "ali",
    description: "this is description",
    price: 5,
    days: 5,
    nights: 9,
    noOfPersons: 9,
    destination: "homeland",
    featuredImg: "https://images.unsplash.com/photo-1538332576228-eb5b4c4de6f5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8ZmlubGFuZHxlbnwwfHwwfHw%3D&w=1000&q=80",
    activities: [{id: 3, name: "沙漠露营"}, {id: 4, name: "民俗体验"}]
  },
  // 第三个对象同理补充activities字段
];

再修改PackageCard中的渲染逻辑：

<div className="mt-3">
  {data.activities?.map((act) => {
    return <Chip className="mr-2 px-3" label={act.name} key={act.id} />;
  })}
</div>

情况3：临时应急方案（不推荐长期使用）

如果暂时无法保证activities的结构唯一性，可以用数组索引作为key（注意：列表项顺序变化时可能引发性能问题）：

<div className="mt-3">
  {data.activities?.map((act, index) => {
    return <Chip className="mr-2 px-3" label={act} key={index} />;
  })}
</div>

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