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

我错过了我的密钥，每个SectionItem都有一个关键支柱。

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没有密钥。您可以通过将div道具移动到previewSection(item, index){ return ( <div key={index}> <SectionItem section={item} saveSection={this.props.saveSection}/> </div> ); }，即

来修复错误

SectionItem

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

或者，如果您不需要div，那么删除它并将密钥保持在previewSection(item, index){ return ( <SectionItem key={index} section={item} saveSection={this.props.saveSection}/> ); }也将修复错误

$listItems

Answer 2

在JavaScript中：Array.map()函数返回一个数组。在您的情况下：您想要返回一组反应组件。 React希望在每个组件的顶层看到密钥。

因此，您需要在previewSection()功能的顶层公开密钥。

要做到这一点：我会删除多余的“div”元素来呈现组件，如下所示：

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

Answer 3

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

您的密钥不应为数字。因此，而不是index，尝试类似{`section${index}`}

的内容

更好的是，密钥根本不应该基于订单索引。因此，如果您的sectionObj具有类似唯一ID的属性，那么这将是理想的选择。

Answer 4

帮助我在关键道具中使用uuid的原因。

在你的情况下：

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

带键的组件缺少唯一的“关键”道具

4 个答案: