主页 / coding / 问题 / 78368747
Accepted
PixelPaul
Asked: 2024-04-23 04:35:43 +0800 CST

React 将键索引作为 prop 传递给组件

  • 772

我正在尝试解决该Warning: Each child in a list should have a unique "key" prop.错误，但收到了一些意外的结果。

这有效（没有警告）：

主页.tsx

{cars?.map((car, index) => (
    <Col key={index}>
        <CarCard car={car} />
    </Col>
))}

卡卡.tsx

interface IProps {
    car: CarSummary
}

export default function CarCard({ car }: IProps) {
    return (
            <Card style={{ width: '18rem' }}>
                <Card.Img variant="top" src={car.image} />
                <Card.Body>
                    <Card.Title>{car.title}</Card.Title>
                    <Card.Text>
                        {car.text}
                    </Card.Text>
                    <Button variant="primary">Details</Button>
                </Card.Body>
            </Card>
    )
}

但是，如果我将周围环境移动<Col key={index}></Col>到CarCard.tsx组件并尝试将其index作为道具传递，我会收到Warning: Each child in a list should have a unique "key" prop.警告。

主页.tsx

{cars?.map((car, index) => (
    <CarCard car={car} index={index} />
))}

车卡.tsx

interface IProps {
    car: CarSummary,
    index: number
}

export default function CarCard({ car, index }: IProps) {
    return (
        <Col key={index}>
            <Card style={{ width: '18rem' }}>
                <Card.Img variant="top" src={car.image} />
                <Card.Body>
                    <Card.Title>{car.title}</Card.Title>
                    <Card.Text>
                        {car.text}
                    </Card.Text>
                    <Button variant="primary">Details</Button>
                </Card.Body>
            </Card>
        </Col>
    )
}

当我尝试将索引作为道具传递时出现错误，我做错了什么？

reactjs

1 个回答

  1. Best Answer

    React 需要它key位于正在迭代的顶部JSX 元素，而不是其子元素中的某个位置。例如：

    {cars?.map((car, index) => (
  <CarCard car={car} key={index} />
))}

    如果子元素需要它来做某事，您也可以将它作为 prop 传递：

    {cars?.map((car, index) => (
  <CarCard car={car} key={index} index={index} />
))}

    但这与 React 的顶层key.

    另请注意，数组索引是一种“最后手段”键。最好使用某种有意义的唯一标识符。例如，如果car有一个id值：

    {cars?.map((car) => (
  <CarCard car={car} key={car.id} />
))}

    在许多情况下（例如，没有交互的元素的静态显示<li>），这并不是什么大问题......直到它成为问题为止。如果集合是可编辑/可过滤/可排序等。那么使用数组索引可能会导致难以调试的错误。

    • 1

相关问题