![](/img/trans.png)
[英]Missing “key” prop for element in iterator react/jsx-key in React
[英]eslint: Missing "key" prop for element in iterator (react/jsx-key)
我是 React 的新手,我正在嘗試 output 一個包含用戶信息的表。 但是 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>
));
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>
);
}
沒有兩個循環將具有相同的 id 和索引,這可以使鍵值不同。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.