React - 数组中的每个子项..唯一的“关键”道具警告

时间:2018-04-18 13:31:43

标签: javascript reactjs components

我似乎对这个校长有一个很好的理解,这让我可以顺便过去,直到现在。我正在为所有迭代器的所有孩子应用一个关键道具,但我仍然得到这个警告。

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

2 个答案:

答案 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} />