React unique key when mapping warning

问题

I'm quite new to react and I'm facing a problem I can't solve. Here is my react component:

import React from 'react';
import Header from './Header';
import ContestPreview from './ContestPreview';

class App extends React.Component {

    state = { 
        pageHeader: 'Naming Contests',
        whatever: 'test'
    };

    render() {
        return (
            <div className="App">
                <Header message={this.state.pageHeader} />
                <div>
                    {this.props.contests.map(contest =>
                        <ContestPreview key={contest.id} {...contest} />
                    )}
                </div>
            </div>
        );
    }
}

export default App;

This Code gives me the following warning:

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of App. See HERE-FB-URL-I-REMOVED for more information. in ContestPreview (created by App) in App

I totally understand what this error means. I understand that each element of an array should have a unique key when looping trough them. What I don't understand is why I get the error, since in my opionion the key should be defined with my <ContestPreview key={contest.id} {...contest} /> ... is key={contest.id} not enough?

Here is my contest data:

{
  "contests": [
    {
      "id": 1,
      "categoryName": "Business/Company",
      "contestName": "Cognitive Building Bricks"
    },
    {
      "id": 2,
      "categoryName": "Magazine/Newsletter",
      "contestName": "Educating people about sustainable food production"
    },
    {
      "id": 3,
      "categoryName": "Software Component",
      "contestName": "Big Data Analytics for Cash Circulation"
    },
    {
      "id": 4,
      "categoryName": "Website",
      "contestName": "Free programming books"
    }
  ]
}

In my opionion it should work, I can't understand why I still get this error. I would really like to get some help on my problem, it would be really cool if someone can explain me whats going on here since I really try to understand how it works.

Thank you for your help! :)

回答1:

I can think of two workarounds...

First way would be to add the key to a surrounding div instead of directly on the ContestPreview element.

<div>
  {this.props.contests.map(contest =>
    <div key={contest.id}><ContestPreview {...contest} /></div>
  )}
</div>

Second way would be to modify ContestPreview so that it actually uses the key prop.

render(){
  <div key={this.props.key}>
  ...
  </div>
}

回答2:

Put wrapper to rendering of each object's properties.

<div>
    {this.props.contests.map(contest =>
        <div key={contest.id}>
             <ContestPreview {...contest} />
        </div>
    )}
</div>

回答3:

In your code here

<div className="App">
   <Header message={this.state.pageHeader} />
    <div>
        {this.props.contests.map(contest => {
            console.log('contest id =', contest.id);
            return (<ContestPreview key={contest.id} {...contest} />);
        })}
    </div>
</div>

This will console the id(key) of each component, that you are rendering in your map. I think for some reason in your array of object you have an object which has the same key.

This way when you see the console.log() results. You will know where in your object you have the error.

I hope this helps you in debugging your error.

来源：https://stackoverflow.com/questions/46421445/react-unique-key-when-mapping-warning

标签

node.js

reactjs

key

mapping

ejs