我是新手,我正在try 输出一个包含用户信息的表.但Eslint一直在给我以下错误:
[eslint] Missing "key" prop for element in iterator [react/jsx-key]
我不确定我是否正确地做到了这一点,但我已经为用户列表中的每个人分配了一个唯一的ID号,但不确定为什么错误会持续存在.
所以在我的名片上.我有以下几点:
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;
在我的主要区域.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>
如何防止出现此错误?