带有键的组件中缺少独特的“键”道具

Question

I am getting the following error in console

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

I have a SeatingChart component

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

which renders the Sections component

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

which renders the SectionsList component

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

Where am I missing my key, each SectionItem has a 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)

You're rendering a list of div (containing one SectionItem each) and your div do not have a key. You can fix the error by moving the key prop to your div ie

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

In this case SectionItem doesn't require a key because there's only 1 SectionItem per div as opposed to a list.

Or if you don't need the div, then removing it and keeping the key on SectionItem will also fix the error

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

Answer 2

In JavaScript: the Array.map() function returns an array. In your case: you want to return an array of react components. React wants to see the key at the top level of each component.

Therefore, you need to expose the key at the top level of your previewSection() function.

To achieve this: I would remove the superfluous "div" element to render the component as follows:

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

Your keys should not be numeric. So rather than index , try something like {`section${index}`}

Even better, the keys should not be based on an order index at all. So if your sectionObj has a property like a unique id, that would be ideal to use.

Answer 4

What helped me was using uuid in the key prop.

In your case:

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