React警告：列表子项需唯一key属性，该如何解决？

问题出在key属性的位置不对：React要求列表循环渲染的**最外层元素（这里是Card组件）**必须携带唯一key，而不是把key放在组件内部的div上。

修正步骤： #

1. 移除Card组件内部div上的key属性
2. 在循环渲染Card的地方（creatcard函数里），给Card标签添加key属性，用characters._id作为值（确保这个值在列表里唯一）

修改后的代码： #

App组件部分：

function App() {
  return <StrictMode>{data.map(creatcard)}</StrictMode>
}
function creatcard(characters) {
  return (
    <Card
      key={characters._id}  // 把key移到这里
      id={characters._id}
      name={characters.name}
      about={characters.about}
      img={characters.img}
    ></Card>
  )
}

Card组件部分：

function Card(props) {  // 注意：参数名是props不是pops
  return (
    <div className="cards">  // 移除这里的key
      <div className="subhead">
        <h1>{props.name}</h1>
      </div>
      <p>
        {props.about.substring(0, 200)}  // 这里应该用props.about，不是abt
        <br></br> <Link to={`/${props.name}`}>Read more...</Link>
      </p>
      <img id="dp" src={props.img}></img>
    </div>
  )
}

另外帮你修正了两个小问题：

• Card组件的参数名打错了，是props不是pops
• 你在p标签里用了abt，应该是props.about，不然会抛出未定义的错误

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