Javascript 独特的；“关键”；带钥匙的部件缺少道具

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

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>
  );
}

这将呈现

部分列表

组件

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>
  );
}

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>
  );
}

previewSection（项目、索引）{
返回(
);
}
sectionListMap（）{
如果（本道具部分）{
让sections=Object.values（this.props.sections）；
返回(
sections.map（此.previewSection）
);
}
}
render（）{
返回(
{this.sectionListMap（）}
);
}

如果我缺少密钥，则每个

节项都有一个密钥道具。
预览节（项，索引）{
previewSection(item, index){
  return (
    <div>
      <SectionItem key={index} section={item} saveSection={this.props.saveSection}/>
    </div>
  );
}

返回(
);
}

您的密钥不应该是数字。因此，与其使用
索引
，不如尝试类似

{`section${index}`}

更好的是，键根本不应该基于顺序索引。因此，如果您的
sectionObj
有一个像唯一id这样的属性，那么这将是理想的使用方法

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
没有键。您可以通过将
键
道具移动到您的
div
来修复错误，即

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

帮助我的是在关键道具中使用

就你而言：

import uuid from "uuid";

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

从“uuid”导入uuid；
render（）{
返回(
{this.sectionListMap（）}
);
}
在JavaScript中：
Array.map（）
函数返回一个数组。在您的例子中：您希望返回一个react组件数组。React希望在每个组件的顶层看到键

因此，您需要在
previewSection（）
函数的顶层公开密钥

为了实现这一点：我将删除多余的“div”元素，以呈现组件，如下所示：

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

previewSection（项目、索引）{
返回(
);
}

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