Каждый ребенок в списке должен иметь уникальную «ключевую» опору, хотя я определил ключ

Question

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

**

• Приложение. js

**

import React, { useState } from "react";
import "./App.css";
import Person from "./Components/Person/Person.js";

const App = props => {
  const [currentState, updatePersonState] = useState({
    Persons: [
      { id: "1", name: "abc", age: "37", hobbies: "Cricket" },
      { id: "2", name: "xyz", age: "33", hobbies: "Cook" },
      { id: "3", name: "pqr", age: "07", hobbies: "Reading" }
    ],
    showContent: true,
    buttonText:'Hide Content'
  });

  let persons = "";
  if (currentState.showContent) {
    persons = currentState.Persons.map((person, index) => (
      <div>
        <Person
          name={person.name}
          age={person.age}
          hobbies={person.hobbies}
          **key={person.id}**
        ></Person>
      </div>
    ));
  }

  const toggleHandler = (event, index) => {
    const showContentNow = currentState.showContent;
    updatePersonState({
      ...currentState,
      showContent: !showContentNow,
      buttonText:currentState.showContent?'Show Content':'Hide Content'
    });
  };
  return (
    <div className="App">
      <h1>Styling Components Dynamically</h1>
      <div>
  <button onClick={toggleHandler}>{currentState.buttonText}</button>
      </div>
      <div> {persons}</div>
    </div>
  );
};
export default App;

Answer 1

Атрибут

key должен быть на элементе root, а не на дочернем элементе

https://reactjs.org/docs/lists-and-keys.html#keys

persons = currentState.Persons.map((person, index) => (
      <div key={person.id}>
        <Person
          name={person.name}
          age={person.age}
          hobbies={person.hobbies}
        ></Person>
      </div>

Однако обратите внимание, что key должен быть уникальным среди братьев и сестер, и он не должен быть уникальным для всего приложения

Answer 2

Не используйте простые целые числа в качестве ключей для элементов React (React не нравится), это предотвращает проблемы, особенно когда у вас много элементов, генерируемых из разных циклов.

Поскольку несколько элементы могут иметь 1 в качестве ключа (например), это может вызвать ошибки во время работы сайта. Я рекомендую использовать целые числа с некоторой идентификационной нотацией, такой как ...

"person_element_${person.id}"

По сути, React советует вам внедрять хорошие методы кодирования.