react Warning: Each child in a list should have a unique key prop

阳光下的雨u

已于 2023-12-18 12:24:08 修改

阅读量4.1k

点赞数 1

文章标签： react.js

于 2021-08-26 14:58:12 首次发布

本文链接：https://blog.csdn.net/smile2333/article/details/119930810

版权

问题：遍历数组来渲染组件报错

Warning: Each child in a list should have a unique key prop

原因：渲染列表时没有使用 key

方案：添加key值

const arrList = [
  { id: 1, text: "中国" },
  { id: 2, text: "美国" },
  { id: 3, text: "韩国" }
];

export default function App() {
  return (
    <div>
      {arrList .map((item) => (
        <div key={item.id}> // 添加key值
          {item.text}
        </div>
      ))}
    </div>
  );
}

注：key代表唯一标识，React 会使用key来判断有哪些内容的修改，并以此来确定哪些信息可以重用，哪些需要重新计算从而来渲染更新内容。虽然不用key不会导致应用崩溃，但它可能会导致一些意外的情况。所以建议添加 key。