React.js 中的警告：每个列表中的子元素都应有一个唯一的 key

本文链接：https://blog.csdn.net/yuanlong12178/article/details/149164918

React.js 中的警告：每个列表中的子元素都应有一个唯一的 key

在 React.js 开发中，key 是一个非常重要的概念，尤其是在渲染列表时。React 使用 key 来识别列表中每个元素的唯一性，从而优化渲染性能并避免潜在的错误。然而，开发者经常会遇到一个警告信息：Warning: Each child in a list should have a unique key。这个警告表明在渲染列表时，某些子元素没有提供唯一的 key，或者提供的 key 不是唯一的。本文将深入探讨这个警告的原因，并提供相应的解决方法，帮助开发者避免此类问题。

一、React.js 中的 `key` 是什么？

在 React.js 中，key 是一个特殊的字符串属性，用于帮助 React 识别列表中每个元素的唯一性。当渲染一个列表时，React 使用 key 来跟踪每个元素的变化，从而优化渲染过程。如果列表中的元素没有提供 key，或者提供的 key 不是唯一的，React 将无法高效地更新 DOM，甚至可能导致错误的行为。

例如，以下是一个渲染列表的简单示例：

function MyComponent() {
  const items = ['Apple', 'Banana', 'Cherry'];
  return (
    <ul>
      {items.map((item) => (
        <li>{item}</li>
      ))}
    </ul>
  );
}

在这个例子中，虽然代码可以正常运行，但 React 会发出警告，因为每个 li 元素没有提供 key。

二、警告出现的原因

（一）未提供 `key`

最常见的原因是没有为列表中的子元素提供 key。React 需要通过 key 来区分列表中的每个元素，如果没有提供 key，React 将无法高效地更新 DOM。

示例代码

function MyComponent() {
  const items = ['Apple', 'Banana', 'Cherry'];
  return (
    <ul>
      {items.map((item) => (
        <li>{item}</li>
      ))}
    </ul>
  );
}

问题分析

在上述代码中，items.map 返回的每个 li 元素没有提供 key，因此 React 发出警告。

（二）`key` 不是唯一的

即使提供了 key，但如果 key 的值不是唯一的，也会导致警告。React 要求每个 key 在其父元素中是唯一的，否则无法正确地识别每个元素。

示例代码

function MyComponent() {
  const items = [
    { id: 1, name: 'Apple' },
    { id: 2, name: 'Banana' },
    { id: 1, name: 'Cherry' }, // id 重复
  ];
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

问题分析

在上述代码中，items 数组中存在重复的 id，导致 key 不是唯一的，从而触发警告。

（三）动态生成的 `key`

在某些情况下，开发者可能会动态生成 key，但生成的 key 可能不是唯一的，或者在某些情况下会改变。这也会导致警告。

示例代码

function MyComponent() {
  const items = ['Apple', 'Banana', 'Cherry'];
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

问题分析

在上述代码中，虽然使用了 index 作为 key，但如果列表中的元素顺序发生变化（例如排序或过滤），key 的值也会改变，从而导致 React 重新渲染整个列表，降低性能。

三、解决方法

（一）为每个子元素提供唯一的 `key`

确保为列表中的每个子元素提供一个唯一的 key。通常可以使用数据中的唯一标识符（如 id）作为 key。

示例代码

function MyComponent() {
  const items = [
    { id: 1, name: 'Apple' },
    { id: 2, name: 'Banana' },
    { id: 3, name: 'Cherry' },
  ];
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

（二）避免使用动态生成的 `key`

如果数据中没有唯一标识符，尽量避免使用动态生成的 key（如 index）。如果必须使用 index，请确保列表的顺序不会频繁变化。

示例代码

function MyComponent() {
  const items = ['Apple', 'Banana', 'Cherry'];
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

（三）确保 `key` 的值是唯一的

如果使用了数据中的属性作为 key，请确保这些属性的值是唯一的。如果数据中存在重复的属性值，可以考虑组合多个属性来生成唯一的 key。

示例代码

function MyComponent() {
  const items = [
    { category: 'fruit', name: 'Apple' },
    { category: 'fruit', name: 'Banana' },
    { category: 'vegetable', name: 'Carrot' },
  ];
  return (
    <ul>
      {items.map((item) => (
        <li key={`${item.category}-${item.name}`}>{item.name}</li>
      ))}
    </ul>
  );
}