Question

我有以下 React Native Flatlist：

<FlatList
            data={dataOnDevice}
            renderItem={({ item }) => {
              return (
                <RowItem
                  id={item.id}
                  key={item.id}
                  text={`ID: ${item.id} Name: ${item.name} Group: ${item.group}`}
                  onPress={() => {
                    navigation.pop();
                  }}
                  rightIcon={
                    <View style={styles.icon}>
                      <Entypo name="trash" size={20} color={colors.white} />
                    </View>
                  }
                />
              );
            }}
            ItemSeparatorComponent={() => <RowSeparator />}
            ListFooterComponent={() => (
              <View style={{ paddingBottom: insets.bottom }} />
            )}
            ListEmptyComponent={() => listEmptyComponent()}
            keyExtractor={(item) => item.id.toString()}
          />

当我在列表中有数据时这工作正常，但当 dataOnDevice 为 null 时，我收到一个错误：

TypeError: null is not an object (evaluating 'item.id.toString')

这是在导致 dataOnDevice 为 null 的重构之后发生的。我的理解是 ListEmptyComponent 应该能够处理...

如何使用 keyExtractor 防止此错误？

现在我通过添加以下内容找到了解决方法：

keyExtractor={(item) => {              
  if (item !== "") {              
    item.id.toString();             
  }            
}}

但我愿意接受任何更简洁的处理方式...

Answer 1

您应该检查 ID 是否为空

在密钥提取器中

  if (item?.id !== "") {

通过？如果不返回 false，则检查该值是否存在

这样您就可以知道您正在接近现有值并避免异常射击

详细了解Ternary Operator

当数据为空时，Flatlist keyExtractor 返回“TypeError: null is not an object”

1 个答案: