我为列表中的每个元素分配了一个唯一键，但仍然收到“警告：列表中的每个子元素都应该有一个唯一的“键”道具。错误

【问题标题】：I assigned each element in my list a unique key, but am still receiving the 'Warning: Each child in a list should have a unique "key" prop.' error我为列表中的每个元素分配了一个唯一键，但仍然收到“警告：列表中的每个子元素都应该有一个唯一的“键”道具。错误
【发布时间】：2021-10-03 17:51:42
【问题描述】：

我是 React 新手，不知道为什么会收到此错误。我在 map 方法中为每个列表元素分配了一个键，但仍然收到错误消息，指出应该为每个元素分配一个键。这是我的代码：

import React, { useState, useEffect } from "react";
import "./App.css";

const namesURL = "http://api.names.com/search/names"; 

function App() {
const [names, setNames] = useState([]); 

  useEffect(() => { 
    getNames();
  }, []);

  const getNames = async () => {
    const response = await fetch(namesURL); 
    const jsonData = await response.json(); 
    jsonData.sort(function(a, b) { 
      let textA = a.name
      let textB = b.name
      return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
  }); 
    console.log(jsonData); 
    setNames(jsonData); 
  };

  return (
    <div className="App">
       {names.map(name => ( 
         <ul>
          <li key={name.id}> 
            <h2>{name.name}</h2>
            <div></div>
            <img src={name.image} alt="image"></img>
            <hr></hr>
          </li>
          </ul>
          ))}  
      </div>
  );
}

export default App;

【问题讨论】：

标签： reactjs

【解决方案1】：

{names.map(name => ( 
  <ul>
    <li key={name.id}>

键需要在数组的最外层元素上。因此，如果您打算像当前代码一样拥有多个 uls，那么请执行以下操作：

{names.map(name => ( 
  <ul key={name.id}>
    <li>

但是，拥有多个uls 可能是一个错误：您正在创建多个列表，每个列表都有一个项目。相反，如果您打算创建一个包含多个项目的列表，则将 ul 移到地图之外。这将使li 成为最外层元素，然后键可以留在li：

<ul>
  {names.map(name => ( 
    <li key={name.id}>

【讨论】：

知道了，谢谢