列表中的每个 child 都应该有一个唯一的 "key" 属性。即使我给了一把钥匙而且它是独一无二的

Question

我知道这个问题已经被问了很多，我完全理解密钥对 re-render 正确组件做出反应的重要性，但我给出了密钥并正确地完成了所有操作，但出于某种原因它仍然给了我这个警告。

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);

  //Recommended payment plans objects to show

  

  // Other packages plans
  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}     // I have tried giving 'i' also and tried creating random strings as unique id but none of them is working
                    priceId={id}
                    priceInfo={priceInfo}
                    recommended={false}
                  />
                </>
              ))}
            </div>
          </Col>
         
        </Row>
      </div>
    </>
  );
};

export default PaymentPackages;

PaymentList 有错误，如果我将其删除，则没有错误，但我该如何解决此警告，我不知道我做错了什么。

Answer 1

键需要在最外层的元素上。在您的情况下，最外层的元素是一个片段。因此，如果不需要，请删除该片段：

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

或者将密钥向上移动到片段（您需要使用普通片段语法才能为其提供密钥）：

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

列表中的每个 child 都应该有一个唯一的 "key" 属性。即使我给了一把钥匙而且它是独一无二的

Each child in a list should have a unique "key" prop. Even though i am giving a key and its a unique one

javascript

warnings

ecmascript-6

reactjs

react-dom