什么意味着列表中的每个孩子都应该有键id？

Question

我想我不明白某事。

我把每一个地方的纳米标识键，但仍然得到错误。

react jsx runtime.Development.js:117警告:列表中的每个子项目都应该有一个唯一的“键”支柱。检查Users的呈现方法。

import React from "react";
import {useQuery} from "@apollo/client"
import { ListGroup, Container, Row, Col,Card } from "react-bootstrap";
import {GET_USERS} from "../Queries/Queries"
import { nanoid } from 'nanoid'

function Users() {
    const { loading, error, data}= useQuery(GET_USERS)
    if (loading) return <p>Loading...</p>
    if (error) return <p>Error</p>

     return (
      <Container> 
        {
        data && data.users.map(user=>{ 
            return(
                <>
                <br/>
               
                <Row key={nanoid()}>
                    <Card  key={nanoid()} style={{ width: '6rem' }}>
                        <Card.Img key={nanoid()} variant="top" src={user.avatar} />
                    </Card>
                    <br />
                    <Col key={nanoid()}>
                    <ListGroup key={nanoid()}>
                        <ListGroup.Item key={nanoid()}>Id: {user.id} </ListGroup.Item>
                        <ListGroup.Item key={nanoid()}>Email: {user.email}</ListGroup.Item>
                        <ListGroup.Item key={nanoid()}>Username: {user.username}</ListGroup.Item>
                    </ListGroup>
                    </Col>  
                </Row>
                
                </> 
                )   
            })
        } 
      </Container>
  );
}

export default Users;

Answer 1

错误消息是说它正在映射的每一项都需要一个键，所以您只需要向父容器添加一个键，如下所示

function Users() {
    const { loading, error, data}= useQuery(GET_USERS)
    if (loading) return <p>Loading...</p>
    if (error) return <p>Error</p>

     return (
      <Container> 
        {
        data && data.users.map((user, index)=>{ 
            return(
                <Row key={index}>
                    <Card style={{ width: '6rem' }}>
                        <Card.Img variant="top" src={user.avatar} />
                    </Card>
                    <br />
                    <Col>
                    <ListGroup>
                        <ListGroup.Item>Id: {user.id} </ListGroup.Item>
                        <ListGroup.Item>Email: {user.email}</ListGroup.Item>
                        <ListGroup.Item>Username: {user.username}</ListGroup.Item>
                    </ListGroup>
                    </Col>  
                </Row>
                )   
            })
        } 
      </Container>
  );
}

我只是删除dthe标记和BR，而不是将父容器添加到您已经拥有的内容中。您应该向该行添加一个className，以获得所需的空间，而不是使用BR。

Answer 2

当你映射一些反应时，用唯一的键来反应轨道节点。e.g

[{id:1,value:'value 1'},{id:2,value:'value 2'}].map((item,index) => 
(<Row key={`row-${item.id}`}>all content goes here.</Row>))

此key={行-${item.id}}对于每个环项都应该是唯一的。