Question

在同一个组件中，假设我们正在渲染以下两个 flatList：

const PROFILES = [
  {
    id: '1',
  },
  {
    id: '2',
    name: 'John Smith',
  },
  {
    id: '3',
    name: 'Jane Doe',
  },
];

const GROUPS = [
  {
    id: '1',
    title: 'Group 1',
  },
  {
    id: '2',
    title: 'Group 2',
  },
  {
    id: '3',
    title: 'Group 3',
  },
];

<FlatList
  data={PROFILES}
  renderItem={({ item, index }) =>
    renderProfile(item, index)
  }
  keyExtractor={(item) => item.id}
/>

<FlatList
  data={GROUPS}
  renderItem={({ item, index }) => renderGroup(item, index)}
  keyExtractor={(item) => item.id}
/>

我正在根据 react native 文档设置密钥，但我的问题是不应该有冲突吗？

PROFILE 和 GROUPS 具有共享相同 ID 的对象，用于生成密钥。

因此，对于第一个渲染的 PROFILES 和 GROUPS 项，它们共享一个值为 '1' 的键。

这会不会在 react native 的某处导致错误？

密钥的目的不是为本地反应提供唯一标识符，以便与该特定项目相关的更改只发生在它身上吗？有两个项目共享相同的密钥，本机应该无法判断要对哪个项目应用更改，对吗？至少这是我的理解。

编辑：

做这样的事情不是更好吗：

keyExtractor={(item) => `group_${item.id}`}
keyExtractor={(item) => `profile_${item.id}`}

:结束编辑

我似乎从来没有遇到过与此相关的错误，而且文档似乎没有提及任何内容，所以我一定是误解了一些东西。

Answer 1

好问题：

一件事永远记住每个孩子应该指定唯一键意味着一个对象与另一个对象不同，因此它可以使用相同的键。

reactNative中flatLists的keyExtractor键名的最佳实践是什么？

1 个答案:

好问题：