React列表已传入唯一key 仍报需唯一'key' prop警告

问题现象 #

• 开发者已明确理解React中key属性保障组件正确重渲染的核心作用，遍历列表时也传入了自认为符合要求的唯一标识，却持续收到列表子元素缺少唯一key的控制台警告。
• 移除PaymentList组件的相关渲染逻辑后，警告会直接消失，始终无法定位错误位置。

涉及的业务代码 #

相关payment-packages.component.jsx的核心逻辑如下：

import React from "react";
import { Row, Col } from "react-bootstrap";
import PaymentList from "../payment-list/payment-list.component";

const PaymentPackages = ({ packages }) => {
  const orgSize = useSelector((state) => state.registeredUser.orgSize);

  let plan1, plan2;

  const otherPlans = packages.filter(
    ({ priceInfo }) => priceInfo.description !== orgSize.toLowerCase()
  );
  if (recommendedHeading.toLowerCase() === "small organization") {
    plan1 = "medium organization";
    plan2 = "large organization";
  } else if (recommendedHeading.toLowerCase() === "medium organization") {
    plan1 = "small organization";
    plan2 = "large organization";
  } else if (recommendedHeading.toLowerCase() === "large organization") {
    plan1 = "small organization";
    plan2 = "medium organization";
  }
  const paymentPlan1 = otherPlans.filter(
    ({ priceInfo }) => priceInfo.description === plan1
  );
 
 
  return (
    <>
      <div className="price-plan" data-test="price-plan">
        <Row>
          <Col>
            <div className="payment-box left-box">
              {paymentPlan1.map(({ priceInfo, id }, i) => (
                <>
                  <PaymentList
                    key={id}
                    priceId={id}
                    priceInfo={priceInfo}
                    recommended={false}
                  />
                </>
              ))}
            </div>
          </Col>
        </Row>
      </div>
    </>
  );
};

export default PaymentPackages;

根因定位 #

警告触发的核心原因出在列表遍历的返回结构上：
map回调每一次循环返回的最外层元素是无属性的空React Fragment <></>，而代码里写的key={id}是绑定在Fragment内部的PaymentList组件上的。
React判断列表项是否携带合法key的规则是以map回调返回的顶层元素为校验基准，此时作为顶层元素的Fragment没有任何属性，自然无法匹配到写在内部子组件上的key，因此会持续触发缺失警告——即便你给内部的PaymentList传入了任意值的唯一标识，也完全无法被React识别到。

修复方案 #

根据实际需求二选一即可：

1. 移除冗余的Fragment包裹
   如果Fragment里只放了单个PaymentList组件，完全不需要额外包裹，直接将PaymentList作为map回调的返回顶层元素，把key绑定在顶层元素上即可：

   {paymentPlan1.map(({ priceInfo, id }) => (
     <PaymentList
       key={id}
       priceId={id}
       priceInfo={priceInfo}
       recommended={false}
     />
   ))}
   

2. 保留Fragment时将key绑定在Fragment上
   如果确实需要用Fragment包裹多个相邻元素，不能使用不支持传属性的短语法<>...</>，需要引入完整的Fragment组件，将key绑定在Fragment本身：

   // 导入完整的Fragment组件
   import React, { Fragment } from "react";
   
   // 遍历逻辑修改为
   {paymentPlan1.map(({ priceInfo, id }) => (
     <Fragment key={id}>
       {/* 这里可以放多个相邻元素，不需要再加额外包裹 */}
       <PaymentList
         priceId={id}
         priceInfo={priceInfo}
         recommended={false}
       />
     </Fragment>
   ))}
   

   短语法的空标签不支持传入任何属性，包括key，如果要给Fragment加key，必须使用上述完整写法。

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