Início / coding / Perguntas / 78368747
Accepted
PixelPaul
Asked: 2024-04-23 04:35:43 +0800 CST

React passa o índice da chave como suporte para o componente

  • 772

Estou tentando resolver o Warning: Each child in a list should have a unique "key" prop.erro, mas estou recebendo alguns resultados inesperados.

Isso funciona (sem aviso):

Página inicial.tsx

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

CartãoCard.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>
    )
}

Mas se eu mover o entorno <Col key={index}></Col>para o CarCard.tsxcomponente e tentar passar o indexcomo suporte, recebo o Warning: Each child in a list should have a unique "key" prop.aviso.

Página inicial.tsx

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

CarCard.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>
    )
}

O que estou fazendo de errado e recebo um erro ao tentar passar o índice como um adereço?

reactjs

1 respostas

  1. Best Answer

    O React precisa que isso keyesteja no elemento JSX superior que está sendo iterado, e não em algum lugar de seus elementos filhos. Por exemplo:

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

    Você também pode passá-lo como prop se os elementos filhos precisarem dele para alguma coisa:

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

    Mas isso é separado do nível superior do React key.

    Observe também que o índice da matriz é uma espécie de chave de "último recurso". É melhor usar algum tipo de identificador exclusivo significativo. Por exemplo, if cartem um idvalor:

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

    Em muitos casos (por exemplo, uma exibição estática de <li>elementos sem interação) não é grande coisa... até que seja. Se a coleção fosse editável/filtrável/classificável/etc. então, usar o índice da matriz pode causar bugs difíceis de depurar.

    • 1

relate perguntas