eslint:缺少"key"迭代器中元素的属性(react/jsx-key) [英] eslint: Missing "key" prop for element in iterator (react/jsx-key)

问题描述

我是React的新手，我正在尝试输出一个包含用户信息的表.但是Eslint一直在给我以下错误:

I am new to React, and I'm trying to output a table containing the information of users. But Eslint is keep giving me the following error:

[eslint]缺少迭代器[react/jsx-key]中元素的键"属性

我不确定是否正确执行了此操作，但是我为用户列表中的每个人分配了唯一的ID号，但不确定为什么该错误持续存在.

I am not sure if I did this properly, but I have assigned a unique ID number for each person in the user list, but not sure why the error is persistent.

所以在我的PeopleCard.js中，我有以下内容:

So in my PeopleCard.js I have the following:

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中，我有以下内容:

And in my MainArea.js, I have the following:

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;

以下行引发了错误，我无法弄清原因:

The following line is throwing the error, and I cannot figure out why:

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

如何防止出现此错误?

推荐答案

您应该将键放在外部元素上

You should put the key on the outer element:

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

这篇关于eslint:缺少"key"迭代器中元素的属性(react/jsx-key)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！