20210827 - Question about Key Attribute in React

Reference

Index as a key is an anti-pattern

Index as a key is an anti-pattern

Examples

Example 1

WRONG:

import React from "react";

const Note = ({note}) => {
  return (
    <li key={note.id}>{note.content}</li>
  )
}

const App = ({ notes }) => {
  
  return (
    <div>
      <h1>Notes</h1>
      <ul>
        {notes.map(note =>
          <Note note={note}/>
        )}
      </ul>
    </div>
  )
}

export default App;

Error I got:

index.js:1 Warning: Each child in a list should have a unique “key” prop.
Check the render method of App. See https://reactjs.org/link/warning-keys for more information.
at Note (http://localhost:3000/static/js/main.chunk.js:24:3)
at App (http://localhost:3000/static/js/main.chunk.js:38:3)

CORRECT:

import React from "react";

const Note = ({note}) => {
  return (
    <li>{note.content}</li>
  )
}

const App = ({ notes }) => {
  
  return (
    <div>
      <h1>Notes</h1>
      <ul>
        {notes.map(note =>
          <Note key={note.id} note={note}/>
        )}
      </ul>
    </div>
  )
}

export default App;

💡 Note that the key attribute must now be defined for the Note components, and not for the li tags like before.

Example 2

一个正确的例子：

import React from 'react'

const Header = ({name}) => (
    <h1>{name}</h1>
)

const Content = ({parts}) => {
    return <Part parts={parts}/>
}

const Part = ({parts}) => {
    return parts.map(part => <p key={part.id}>{part.name} {part.exercises}</p>)
}

const Course = ({course}) => {
    return (
        <div>
            <Header name={course.name}/>
            <Content parts={course.parts}/>
        </div>
    )
}

export default Course

也可以这样写

import React from 'react'

const Header = ({name}) => (
    <h1>{name}</h1>
)

const Content = ({parts}) => {
    return parts.map(part => <Part key={part.id} part={part}/>)
}

const Part = ({part}) => {
    return <p>{part.name} {part.exercises}</p>
}

const Course = ({course}) => {
    return (
        <div>
            <Header name={course.name}/>
            <Content parts={course.parts}/>
        </div>
    )
}

export default Course

这两种形式都可以，不过推荐第二种，各个Component的功能比较清晰明确。

Example 3

const Course = ({courses}) => {
    return (
        <div>
            {courses.map(course => {
                return (
                    <div>
                      <Header key={course.id} name={course.name}/>
                      <Content key={course.id} parts={course.parts}/>  
                    </div>
                )
            })}
        </div>
    )
}

export default Course

The errors I got:

Pass the key attribute to <div>, it works well and no errors pop up

const Course = ({courses}) => {
    return (
        <div>
            {courses.map(course => {
                return (
                    <div key={course.id}>
                      <Header name={course.name}/>
                      <Content parts={course.parts}/>  
                    </div>
                )
            })}
        </div>
    )
}

Some notes

• key属性要放置到最外层的元素或组件中

• key的值最好不要为index

• 最外层是<React.Fragment>时也一样要放key属性。