Предупреждение: у каждого потомка должен быть уникальный ключ — Передача массива в ReactJS

Я практиковал уроки 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;

Затем я получил предупреждение в консоли:

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

Предупреждение: у каждого потомка должен быть уникальный ключ — Передача массива в ReactJS

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

<Joke key = {joke.id} ...> (в предупреждении написано key prop, в вашей шутке есть только реквизит obj)

— 15.02.2019 09:30

javascript arrays reactjs key

15.02.2019 09:28

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

244

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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)
      />
    )
  })

Вы не должны использовать индекс для ключа.

— 15.02.2019 09:33

Да, я исправил это, я заметил, что у него есть идентификатор для шутки, так что в любом случае индекс не нужен.

— 15.02.2019 09:36

15.02.2019 09:30

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

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

15.02.2019 09:32

Другие вопросы по теме

Еще одна проблема обновления v-for с реквизитом

Существует ли алгоритм нахождения минимального набора преобразований, необходимых для перевода массива в новое состояние?

Несколько строк PHP, выбранных из базы данных

Как определить функцию, которая принимает число в качестве параметра и возвращает его квадрат в угловых?

Как перевернуть массив символов, составляющих предложение

Зашифрованное число при доступе к массиву [10000]

Возникла проблема со словарем машинописного текста

Изменение знака некоторых значений массива в C

Как сравнить суммы отдельных строк?

#value error формула массива mac excel 2016

Предупреждение: у каждого потомка должен быть уникальный ключ — Передача массива в ReactJS

Ответы 2

Другие вопросы по теме

Похожие вопросы