在 React Native 中使用带有 FlatList 的 keyextarctor 时出现警告答案

【问题标题】：warning while using keyextarctor with FlatList in React Native在 React Native 中使用带有 FlatList 的 keyextarctor 时出现警告
【发布时间】：2021-05-07 07:50:35
【问题描述】：

我是 React Native 的新手，我正在学习一个教程。我正在使用 FlatList 来渲染组件。这是我的组件：

const HomeScreen = (props) => {
  console.log("articles: ", props.articles);
  return (
    <View>
        <FlatList
          data={ props.articles }
          renderItem={({item}) => <Text> {item.title}</Text>}
        />
    </View>
  );
}

教程中提到如果我们不使用KeyExtarctor，FlatList会抛出这个警告

VirtualizedList：缺少项目的键，请确保在每个项目上指定一个键属性或提供自定义 keyExtractor。

我没有看到任何这样的警告。该教程已经很老了，所以我想知道这个问题在最新版本的 React Native 中是否仍然存在？

【问题讨论】：

这能回答你的问题吗？ Basic FlatList code throws Warning - React Native
不，它没有。根据这个问题，我应该得到一个警告。但我没有得到任何东西。我的问题是：“为什么我没有收到任何警告？” @Abhi

标签： reactjs react-native react-native-flatlist

【解决方案1】：

<FlatList
    data={ props.articles }
    keyExtractor={(item) => item.id.toString()} // it is implemented like this
    renderItem={({item}) => <Text> {item.title}</Text>}
/>

您的 props.articles 数组项应具有 key 或唯一属性以将其分配给键。

keyExtractor 需要通过跟踪项目的重新排序来避免重新创建列表。

重要提示

React 总是使用唯一的键来跟踪组件中的更新。默认情况下，FlatList 在数据项中查找自定义 keyExtractor 实现或名为 key 的字段，否则它使用 array index 作为键的值。 id 是响应中的唯一值，可用于实现 keyExtractor

【讨论】：