遇到两个孩子使用相同的键, undefined. flatlist - Javascript

当我们使用JavaScript的FlatList组件时，有时会遇到两个孩子使用了相同的键，这可能会导致一些预期外的行为发生。其中一种异常行为可能会导致孩子组件未正确呈现或呈现了错误的数据。在这篇文章中，我们将讨论遇到这个问题时应该如何解决它。

首先，让我们快速了解一下FlatList组件。在React Native中，FlatList是一个高性能的滚动组件，它可在大数据集上呈现一个可滚动的列表，并提供了各种优化选项，以提高性能并减少内存占用。FlatList用于呈现一系列的无限数据，比如长列表。

在使用FlatList时，我们必须为它提供一些基本的参数，例如数据源、渲染单个项目的item属性和keyExtractor函数。其中，keyExtractor函数会告诉FlatList如何为每个元素生成唯一的键。这就是我们在遇到两个孩子使用相同的键时遇到的问题。

下面是一个使用FlatList的例子：

<FlatList
  data={this.state.users}
  renderItem={({ item }) => (
    <Text>{item.name}</Text>
  )}
  keyExtractor={(item) => item.id} 
/>

在这个例子中，我们使用了state中的users数组作为数据源，并用传递给FlatList组件的renderItem属性呈现每个元素的名称。keyExtractor函数使用了用户对象中的id属性。这将确保每个列表项都有一个唯一的键。

但有时，我们可能会意外地将两个元素放置在同一个键下。这最常见的是使用了一个随机字符串作为键，而这个字符串在多次渲染之间没有改变。

下面是一个使用uuid模块生成随机字符串的例子：

import uuid from 'uuid';

<FlatList
  data={this.state.users}
  renderItem={({ item }) => (
    <Text key={uuid.v4()}>{item.name}</Text>
  )}
/>

在这个例子中，我们使用了uuid模块生成一个随机的唯一字符串作为每个列表项的键。然而，由于FlatList没有任何机制来防止生成相同的键，所以我们可能会遭遇两个孩子使用相同的键的问题。

为了解决这个问题，我们可以使用FlatList组件在删除和添加列表项时会更新key的行为。每次添加或删除后，FlatList都会重新生成列表项的键，从而保证每个节点都有唯一的键。

下面是一个更改keyExtractor函数的例子，使FlatList组件在删除和添加列表项时会更新key的行为：

<FlatList
  data={this.state.users}
  renderItem={({ item }) => (
    <Text key={item.id}>{item.name}</Text>
  )}
  keyExtractor={(item) => item.id.toString()}
/>

在这个例子中，我们将keyExtractor函数从使用uuid模块生成的随机字符串更改为使用用户对象中的id属性，并将其转换为一个字符串。这将确保每个列表项都有一个唯一的键，并在更新、删除或添加列表项时重新生成这个键。

总结一下，当我们遇到两个孩子使用相同的键时，我们需要考虑使用FlatList组件来重新生成键。我们可以使用FlatList内置的更新键的行为来解决该问题，并且在keyExtractor函数中使用唯一的标识符作为列表项的键，以确保每个列表项都有一个唯一的键。

希望这篇文章对您有所帮助，如果您有任何问题或建议，请在评论中告诉我们。