[英]eslint: Missing "key" prop for element in iterator (react/jsx-key)
I am new to React, and I'm trying to output a table containing the information of users.我是 React 的新手,我正在尝试 output 一个包含用户信息的表。 But Eslint is keep giving me the following error:但是 Eslint 不断给我以下错误:
[eslint] Missing "key" prop for element in iterator [react/jsx-key]
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.我不确定我是否正确执行了此操作,但我为用户列表中的每个人分配了一个唯一的 ID 号,但不确定为什么错误会持续存在。
So in my PeopleCard.js I have the following:所以在我的 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;
And in my MainArea.js, I have the following:在我的 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;
The following line is throwing the error, and I cannot figure out why:以下行抛出错误,我不知道为什么:
<Col sm="4">
<PeopleCard key={person.id} person={person} />
</Col>
How can I prevent this error from appearing?如何防止出现此错误?
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>
));
sometime it still give issue if your two key values get match so better use this way.
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>
);
} }
were no two loop will have same id with index which can make key value different.没有两个循环将具有相同的 id 和索引,这可以使键值不同。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.