时间戳

首页 > 解决方案 > 在 React Native 中使用带有 FlatList 的 keyextarctor 时出现警告

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

问题描述

我是 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 中是否仍然存在？

标签： reactjsreact-nativereact-native-flatlist

解决方案

<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 indexkey 的值。id 是响应中的唯一值，可用于实现 keyExtractor

推荐阅读