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

react key报错

文章共198字 · 阅读需要大约1分钟

一键AI生成摘要，助你高效阅读

问答

阳光下的雨u

3432人浏览 · 2021-08-26 14:58:12

阳光下的雨u · 2021-08-26 14:58:12 发布

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

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。