React已为列表元素分配唯一key仍报key属性警告如何解决？

• 你把key属性绑定在了<li>标签上，但map遍历返回的最外层直接根节点是<ul>，React要求遍历生成的每一个直接顶级节点必须携带唯一key，你现在相当于给<ul>的子节点加了key，但没给被遍历的<ul>本身加，所以才会触发警告。
• 额外语义优化提示：你当前的写法会给每个名字都生成单独的<ul>列表，不符合HTML列表的标准语义，正常应该是共用一个外层<ul>，遍历生成内部的<li>元素。

方案1（仅修复警告，不调整原有结构） #

直接把key从<li>移到最外层的<ul>上即可：

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

方案2（推荐，优化语义同时修复警告） #

把<ul>提到map外面，只遍历生成<li>元素，既符合HTML语义规范，也满足React的key要求：

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

内容的提问来源于stack exchange，提问作者prstsb