React传递index作为组件prop仍触发key唯一警告问题排查

核心问题：key的位置放错了 #

React要求map循环生成的每一个直接子元素必须带有唯一的key属性，这个key要加在你从map里直接return的元素上，而非组件内部的嵌套元素。

为什么第一种写法正常？ #

第一种写法里，map直接返回<Col>，你把key={index}加在了这个<Col>上——这正是map的直接子元素，React能识别这个key作为循环项的唯一标识，所以没有警告。

第二种写法错在哪？ #

把<Col>移到CarCard组件内部后，map现在直接返回的是<CarCard>，但你没给这个<CarCard>加key，反而把key加在了组件内部的<Col>上。React不会识别组件内部元素的key，它只认map返回的最外层元素的key，因此触发了"缺少唯一key"的警告。

正确写法 #

修改Home.tsx，给CarCard加上key：

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

CarCard内部的<Col>可以去掉key（留着也不影响，但没必要）：

interface IProps {
    car: CarSummary
}

export default function CarCard({ car }: IProps) {
    return (
        <Col>
            <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>
    )
}

额外建议 #

尽量不要用index作为key，最好用每个car对象自带的唯一标识（比如car.id）。因为当列表元素的顺序发生变化（比如新增、删除、排序）时，index会跟着变化，可能导致React的渲染逻辑出错，出现组件状态混乱的问题。用唯一id作为key才是更可靠的做法。

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