列表中的每個孩子都應該有一個唯一的“關鍵”道具。 即使我給了一把鑰匙，而且它是獨一無二的

Question

我知道這個問題已經被問了很多，我完全理解 key 對重新渲染正確組件的重要性，但我給了一個 key 並做所有正確的事情，但由於某種原因它仍然給我這個警告。

付款包.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>
))}