eslint: 반복기(react/jsx-key) 요소에 대한 "키" 프로펠러가 없습니다.

eslint: 반복기(react/jsx-key) 요소에 대한 "키" 프로펠러가 없습니다.

React는 처음이라 사용자의 정보가 담긴 표를 출력하려고 합니다.하지만 Eslint는 계속해서 다음과 같은 오류를 나에게 준다.

[eslint] Missing "key" prop for element in iterator [react/jsx-key]

제대로 했는지 모르겠지만 사용자 목록에 있는 각 사용자에게 고유 ID 번호를 할당했는데 오류가 지속되는 이유는 알 수 없습니다.

그래서 내 PeopleCard.js에는 다음이 있습니다.

import React from "react";
import {
  Card,
  CardImg,
  CardText,
  CardBody,
  CardTitle,
  CardSubtitle,
  Button
} from "reactstrap";
import PropTypes from "prop-types";

class PeopleCard extends React.Component {
  static propTypes = {
    person: PropTypes.object,
    id: PropTypes.number,
    name: PropTypes.string,
    company: PropTypes.string,
    description: PropTypes.string
  };
  render() {
    return (
      <div>
        <Card>
          <CardImg
            top
            width="100%"
            src="https://via.placeholder.com/318x180.png"
            alt="Card image cap"
          />
          <CardBody>
            <CardTitle>{this.props.person.name}</CardTitle>
            <CardSubtitle>{this.props.person.company}</CardSubtitle>
            <CardText>{this.props.person.description}</CardText>
            <Button>Button</Button>
          </CardBody>
        </Card>
      </div>
    );
  }
}

export default PeopleCard;

MainArea.js에는 다음과 같은 것이 있습니다.

import React from "react";
import { Container, Row, Col } from "reactstrap";
import PeopleCard from "./PeopleCard";

class MainArea extends React.Component {
  constructor() {
    super();
    this.state = {
      people: [
        {
          id: 1,
          name: "John",
          company: "Some Company, Inc",
          description: "Met at a party."
        },
        {
          id: 2,
          name: "Mary",
          company: "Some Company, Inc",
          description: "Met at a party."
        },
        {
          id: 3,
          name: "Jane",
          company: "Some Company, Inc",
          description: "Met at a party."
        }
      ]
    };
  }
  render() {
    let peopleCard = this.state.people.map(person => {
      return (
        <Col sm="4">
          <PeopleCard key={person.id} person={person} />
        </Col>
      );
    });
    return (
      <Container fluid>
        <Row>{peopleCard}</Row>
      </Container>
    );
  }
}

export default MainArea;

다음 행이 오류를 발생시키고 있는데, 그 이유를 알 수 없습니다.

<Col sm="4">
   <PeopleCard key={person.id} person={person} />
</Col>

이 오류가 발생하지 않도록 하려면 어떻게 해야 합니까?

외부 요소에 키를 대야 합니다.

const peopleCard = this.state.people.map(person => (
  <Col key={person.id} sm="4">
    <PeopleCard person={person} />
  </Col>
));

잠시 시간을 내어 다음 사항에 주목해 주십시오.Col요소에는 고유한 키가 있습니다.실제로.person.id는 맵 루프 전체에서 일의입니다.

두 개의 키/값이 일치하면 문제가 될 수 있습니다.이러한 방법으로 사용하는 것이 여전히 문제가 될 수 있습니다.

render() {
  let peopleCard = this.state.people.map((person, index) => {
    return (
      <Col sm="4" key={`${person.id}+${index}`}>
        <PeopleCard key={person.id} person={person} />
      </Col>
    );
  });
  return (
    <Container fluid>
      <Row>{peopleCard}</Row>
    </Container>
  );
}

여기서 2개의 루프가 같은 ID를 가질 수 없습니다.index키/값이 다를 수 있습니다.

언급URL : https://stackoverflow.com/questions/54401481/eslint-missing-key-prop-for-element-in-iterator-react-jsx-key