从根源理解：useList 使用 Fragment 组件出现的 key 警告

2024-01-05 17:21:32

引言

在 React 开发中，使用 Fragments（片段）组件来包裹一个组件列表是一个常见的做法。它有助于保持代码的整洁和组织性，但有时可能会遇到与密钥（key）相关的警告。本文将深入探讨当使用 useList 钩子时出现此类警告的原因，并提供解决此问题的有效方法。

useList 钩子

useList 钩子是 react-use 库中提供的一个实用工具，它允许您管理列表并响应其变化。它返回一个数组，其中包含列表项的当前状态，以及对更新列表的函数的引用。

片段组件

片段组件是一种特殊的 React 组件，用于将多个子组件组合在一起，而不会向 DOM 添加额外的元素。这使它们成为包裹组件列表的理想选择，因为它可以保持代码整洁，而不会引入额外的 HTML 标记。

密钥警告

当使用 Fragments 包裹组件列表时，React 会警告您为每个子组件指定一个唯一的 key。这是因为 React 使用密钥来跟踪列表中组件的身份，并在列表更改时进行高效的更新。没有密钥，React 可能无法正确更新列表，从而导致意外的行为和性能问题。

解决 key 警告

解决使用 useList 钩子时出现的 key 警告的方法很简单：为列表中的每个组件指定一个唯一的 key 。可以使用 Array.prototype.map() 方法来实现，如下所示：

const MyComponent = () => {
  const [list, setList] = useList([]);

  return (
    <Fragment>
      {list.map((item, index) => (
        <ListItem key={index} item={item} />
      ))}
    </Fragment>
  );
};

在这种情况下，index 被用作每个组件的唯一键。这是使用映射函数生成组件列表时的一种常见做法。

替代方案：使用 KeyedList 组件

react-use 库还提供了一个名为 KeyedList 的组件，它自动处理列表项的密钥。它接受一个数组作为道具，并为每个项生成一个唯一的 key。这可以简化代码并防止 key 警告，如下所示：

const MyComponent = () => {
  const [list, setList] = useList([]);

  return (
    <KeyedList items={list} renderItem={item => <ListItem item={item} />} />
  );
};