[英]Each child in a list should have a unique “key” prop. Even though i am giving a key and its a unique one
I know this question has been asked a lot and i fully understand the importance of key for react to re-render correct components but i am giving a key and doing everything right but for some reason its still giving me this warning.我知道这个问题已经被问了很多,我完全理解 key 对重新渲染正确组件的重要性,但我给了一个 key 并做所有正确的事情,但由于某种原因它仍然给我这个警告。
payment-packages.component.jsx付款包.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;
Error is with the PaymentList if i delete it then there is no error but how can i solve this warning i don't know what i am doing wrong.如果我删除它,PaymentList 就会出错,那么就没有错误,但我该如何解决这个警告,我不知道我做错了什么。
The key needs to be on the outermost element.键需要在最外层的元素上。 In your case, the outermost element is a fragment.
在您的情况下,最外面的元素是一个片段。 So either delete the fragment if it's not needed:
因此,如果不需要,请删除片段:
{paymentPlan1.map(({ priceInfo, id }, i) => (
<PaymentList
key={id}
priceId={id}
priceInfo={priceInfo}
recommended={false}
/>
))}
Or move the key up to the fragment (you need to use the longhand fragment syntax in order to give it a key):或者将键向上移动到片段(您需要使用速记片段语法才能给它一个键):
{paymentPlan1.map(({ priceInfo, id }, i) => (
<React.Fragment key={id}>
<PaymentList
priceId={id}
priceInfo={priceInfo}
recommended={false}
/>
</React.Fragment>
))}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.