我似乎对这个校长有一个很好的理解,这让我可以顺便过去,直到现在。我正在为所有迭代器的所有孩子应用一个关键道具,但我仍然得到这个警告。
FacilitiesContainer
正在呈现FacilitiesComponent
,而Facilities
会呈现Courses
列表,其中会显示Course
列表。 FacilitiesContainer
不使用迭代器。但是,FacilitiesComponent
正在通过HOC传递// The render method of FacilitiesContainer
render = () => {
let FacilitiesWithSearch = SearchHOC(
BasicSearch,
FacilitiesComponent,
{data: this.state.facilities }
);
return <FacilitiesWithSearch />;
}
class FacilitiesComponent extends Component {
renderFacilities = () => (
this.props.data.map((facilityData, index) =>
<Facility key={index} data={facilityData} />
)
)
render = () => (
<Grid>
<Row>
<Col xs={12} sm={8} smOffset={2} md={8} mdOffset={1}>
{
this.props.data.length > 0
? this.renderFacilities()
: <div>No results</div>
}
</Col>
</Row>
</Grid>
)
}
const Facility = ({ data }) => (
<Panel>
<Panel.Heading>
<Panel.Title>{data.Name}</Panel.Title>
</Panel.Heading>
<Panel.Body>
<Grid>
<Row>
<p><b>Address:</b><br />
{data.Street}<br />
{data.City}, {data.State} {data.Zip}
</p>
<p><b>Phone:</b> {data.Phone}</p>
{
data.Courses.map((courseData, index) =>
<p><Course key={index} data={courseData} /></p>)
}
</Row>
</Grid>
</Panel.Body>
</Panel>
);
,HOC将返回最终组件。 HOC中没有任何内容可以修改传递的组件,因此我不确定这是否是一个问题。
rails destroy model Name
答案 0 :(得分:7)
您确实没有向p
元素提供密钥:
{
data.Courses.map((courseData, index) =>
<p><Course key={index} data={courseData} /></p>)
}
应该是
{
data.Courses.map((courseData, index) =>
<p key={index}><Course data={courseData} /></p>)
}
答案 1 :(得分:2)
尝试在将索引分配给键之前将其附加到索引。这是因为您只使用索引(0,1,2 ...)作为设施列表和课程列表,因此最终渲染组件中将存在重复索引。如果您执行以下操作,则确保每个索引都是唯一的:
<Facility key={`facility_${index}`} data={facilityData} />
和
<Course key={`course_${index}`} data={courseData} />