[React - 从问题中学习]列表中的每个子项都应该有一个唯一的“key”属性

# Web 开发# 编程# React# nextjs

针对此错误的最佳解决方案：https://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js/43892905#43892905

在渲染元素列表时（例如使用 `map()` 函数生成组件数组时），React 中会出现警告 **“列表中的每个子项都应具有唯一的‘key’属性”**。React 使用 `key` 属性来标识列表中的哪些项被更改、添加或删除。这有助于 React 高效地更新和重新渲染 UI 的必要部分。

关键道具为何如此重要？

  • 重新渲染的效率：React 需要一种方法来唯一地标识列表中的每个元素，以便确定需要更新、删除或添加哪些元素。如果没有唯一的 key props，React 将不得不做更多工作，可能会重新渲染不必要的组件，从而损害性能。
  • 稳定标识：当列表项的顺序发生变化时（例如，如果您删除一个项目或添加一个新项目），React 可以跟踪已移动的项目并仅更新该项目。这只有当每个项目都有唯一键时才有可能。
  • 避免错误：如果项目没有唯一的关键道具，React 可能会对哪些项目发生了变化做出错误的假设，从而导致潜在的渲染错误。

    • 关键道具应该是什么？

  • 唯一性：列表中的每个项目的键都应该是唯一的。通常最好使用数据中的唯一标识符（如 ID）。
  • 稳定性：除非项目本身被删除或添加，否则密钥在渲染之间不应发生变化。它必须在组件的整个生命周期内保持一致。

    • 例如，如果你正在呈现用户列表，最好使用用户 ID 作为“键”，因为它是唯一且稳定的：

    const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

const UserList = () => {
  return (
    
      
      {users.map(user => (
        
    • {user.name}
      •   // Use user.id as the key
      ))}
    
    
  );
};

    常见错误

  • 使用数组索引作为键：有时开发人员使用 map() 迭代的索引作为键：
    • {users.map((user, index) => (
     
  • {user.name}
    •  // Using index as key
   ))}

    虽然这在简单情况下可以奏效，但**不建议**。当列表动态更新时（例如添加、删除或重新排序项目时），使用索引可能会导致问题。React 可能无法区分不同的列表项，从而导致意外行为。

  • 非唯一键：如果键不唯一（例如，两个项目具有相同的键），React 将显示警告并且可能无法按预期运行。

    • 概括：

  • 在渲染列表时，始终对关键属性使用唯一且稳定的值。
  • 该键可帮助 React 跟踪哪些项目发生了变化，从而提高渲染性能并避免错误。
  • 避免使用数组的索引作为键，除非列表是静态的并且不会随时间而改变。