为数组子项创建唯一的键道具（React.js）

Question

I am trying to build out a component in React which takes information from a JSON source, and uses some of that information to create states which can be passed down into other separate components. While I haven't passed my states into separate components yet, I have been able to get my state to update with the information from the JSON. However, when I load my page I get an error code which I want to sort out before continuing with my project in case there are unintended side effects from leaving the error in my code. The error code reads as following:

index.js:1 Warning: Each child in a list should have a unique "key" prop.

Check the render method of FetchData

in div (at FetchData.js:27)

in FetchData (at App.js:8)

in div (at App.js:7)

My App.js looks like this:

import React from 'react';
import './App.css';
import FetchData from './Components/FetchData/FetchData';

function App() {
  return (
    <div className="App">
      <FetchData/>
    </div>
  );
}
export default App;

My FetchData.js looks like this:

import React from 'react';

class FetchData extends React.Component {
    constructor() {
        super();
        this.state = {
            portrait: null,
            title: null
        };
    }

    componentDidMount() {
        fetch('https://randomuser.me/api')
        .then (response => {
            return response.json();
        })
        .then (data => { 
            let userImage = data.results.map((person) => {
                return (
                    <div>
                        <img alt='portrait' img src={person.picture.large}/>
                    </div>
                )
            })
            let userTitle = data.results.map((person) => {                                  //line 27
                return (
                    <div key={person.results}>
                        <div> {person.name.title} </div>
                    </div>
                )
            })
            
            this.setState ({ 
                portrait: userImage,
                title: userTitle
             })
             console.log(this.portrait, this.title)
        })
    }
    
    render() {
        return (
            <div className='box1'>
                <div className='box2'>
                    <h2>{this.state.title}</h2>
                    {this.state.portrait}
                </div>
            </div>
        )
    }
};

export default FetchData;

and just in case since my index.js looks like this:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

I thought the issue was the fact that I used "person" into both my "data.results.map" so I tried to change the naming but that did not work either. Any help would be greatly appreciated!

Answer 1

The error is referring to your FetchData component.

The reconciliation algorithm in React can work if you assign an unique key to returned DOM objects. In this case, you are returning from the map function a list of similar DOM object. Any returned chunk have to declare the key attribute on the parent node.

In your case:

componentDidMount() {
        fetch('https://randomuser.me/api')
        .then (response => {
            return response.json();
        })
        .then (data => { 
            let userImage = data.results.map((person) => {
                return (
                    <div key={person.id}>
                        <img alt='portrait' img src={person.picture.large}/>
                    </div>
                )
            })
            let userTitle = data.results.map((person) => {                                  //line 27
                return (
                    <div key={person.id}>
                        <div> {person.name.title} </div>
                    </div>
                )
            })
            
            this.setState ({ 
                portrait: userImage,
                title: userTitle
             })
             console.log(this.portrait, this.title)
        })
    }

The key value must be an unique string and it is used by React to update the correct DOM nodes on state change. (I don't know how your person.results is filled, but you need a sort of ID)

For simple component you can also use this syntax

            let userImage = data.results.map((person,idx) => {
                return (
                    <div key={idx}>
                        <img alt='portrait' img src={person.picture.large}/>
                    </div>
                )
            })

Be aware using this syntax, because idx is the position of the current element in the containing array, and if used more than one time, it results in duplicate keys (And React will think that nodes with same key are the same nodes)

Answer 2

Using Index as a key is an anti-pattern in React.

Never using the index as a key in React, unless:

• the list and items are static–they are not computed and do not change
• the items in the list have no ids;
• the list is never reordered or filtered.

When all of them are met, you may safely use the index as a key.

If not, please use the unique ID.

It may come from the elements you are going to display,

Or you can add a new ID property to your model or hash some parts of the content to generate a key. The key only has to be unique among its siblings, not globally unique.

Read more here and here in React Docs

Answer 3

In your data.results.map((person)) function you need to add idx prop, so your code should look like:

let userImage = data.results.map((person,idx) => {
                return (
                    <div key={idx}>
                        <img alt='portrait' img src={person.picture.large}/>
                    </div>
                )
            })

Answer 4

You can simply add the key attribute in the elements whenever you are using.map

let userImage = data.results.map((person, index) => {
    return (
        <div key={index}>
            <img alt='portrait' img src={person.picture.large}/>
        </div>
    )
})

For the value of the key, it is preferred to use an unique id. If you do not have one, you can use index instead.