javascript - React - 数组中的每个 child .. 独特的 "key" Prop 警告

Question

我似乎对这个原则有一个不错的理解，这让我能过得去，直到现在。我正在对所有迭代器的所有子级应用一个 key Prop ，但我仍然收到此警告。

一个 FacilitiesContainer 正在呈现一个 FacilitiesComponent，后者又呈现一个 Facilities 列表，后者呈现一个 Courses。 Course 不使用迭代器。但是，FacilitiesContainer 通过 HOC 传递 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>
);

Answer 1

您确实没有在此处提供 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>)
}