javascript - 带有键的组件中缺少唯一的 "key" Prop

Question

我在控制台中收到以下错误

warning.js:33 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `SectionList`. See for more information.
    in div (created by SectionList)
    in SectionList (created by Sections)
    in div (created by Sections)
    in div (created by Sections)
    in Sections (created by SeatingChart)
    in div (created by SeatingChart)
    in div (created by SeatingChart)
    in div (created by SeatingChart)
    in div (created by SeatingChart)
    in SeatingChart (created by Connect(SeatingChart))

我有一个SeatingChart组件

render() {
  return (
    <div className="container-fluid">
      <div className="row">
        <div className="col-md-12">
          <div className="col-md-4 offset-md-1 align-top" style={SeatingChartStyle.sectionBuilder}>
            <Sections teamName={this.props.seatingChart.teamName} sections={this.props.seatingChart.sections} saveSection={this.saveSection}/>
          </div>
        </div>
      </div>
    </div>
  );
}

渲染 Sections 组件

renderSectionList(){
  if(this.props.teamName){
    return (
      <div>
        <br />
        <h3>Sections</h3>
        <SectionList sections={this.props.sections} saveSection={this.props.saveSection} />
      </div>
    );
  }
}

render() {
  return (
    <div>
      {this.renderSectionList()}
    </div>
  );
}

呈现 SectionsList 组件

previewSection(item, index){
  return (
    <div>
      <SectionItem key={index} section={item} saveSection={this.props.saveSection}/>
    </div>
  );
}

sectionListMap() {
  if(this.props.sections) {
    let sections = Object.values(this.props.sections);
    return (
      sections.map(this.previewSection)
    );
  }
}

render() {
  return (
    <div className="col-md-9">
      <div id="accordion" role="tablist" aria-multiselectable="true">
        <SectionItem key={-1} section={sectionObj} saveSection={this.props.saveSection} />
        {this.sectionListMap()}
      </div>
    </div>
  );
}

我在哪里遗漏了我的 key ，每个 SectionItem 都有一个 key Prop 。

Answer 1

warning.js:33 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `SectionList`. See for more information.
    in **div** (created by SectionList)

您正在呈现一个 div 列表(每个包含一个 SectionItem)并且您的 div 没有键。您可以通过将 key Prop 移动到您的 div 来修复错误，即

previewSection(item, index){
  return (
    <div key={index}>
      <SectionItem section={item} saveSection={this.props.saveSection}/>
    </div>
  );
}

在这种情况下，SectionItem 不需要键，因为每个 div 只有 1 个 SectionItem，而不是列表。

或者，如果您不需要 div，则将其删除并将键保留在 SectionItem 上也可以修复错误

previewSection(item, index){
  return (
      <SectionItem key={index} section={item} saveSection={this.props.saveSection}/>
  );
}