Предупреждение: у каждого ребенка должен быть уникальный ключ - Passing Array In ReactJS

Question

Я практиковался в ReactJS на Scrimba, где вы должны передавать id реквизиты в массиве

import React from 'react';
import Joke from './components/Joke.js'
import jokesData from './components/jokesData';

function App() {
  
  const jokeComponents = jokesData.map(function(joke) {
    return (
      <Joke 
        obj={{key: joke.id, question: joke.question, punchline: joke.punchLine}} 
      />
    )
  })

  return (
    <div>
      {jokeComponents}
    </div>
  )
}

export default App;

Тогда я получил в консоли предупреждение:

Журнал предупреждений

На изображении выше значение ключа было передано, но я все еще получил предупреждение.Я пытаюсь передать элементы в один объект.Может кто-нибудь помочь мне найти проблему здесь?

Answer 1

Вы должны передать ключ как опору компоненту Шутки.id будет отличным выбором из-за того, как отреагирует работа примирения

<Joke  key={joke.id}
            obj={{key: joke.id, question: joke.question, punchline: joke.punchLine}} 
          />

Answer 2

Вы можете добавить атрибут key и передать в него joke.id.

  const jokeComponents = jokesData.map(function(joke) {
    return (
      <Joke 
        obj={{key: joke.id, question: joke.question, punchline: joke.punchLine}}
        key={joke.id)
      />
    )
  })