当数据为空时，Flatlist keyExtractor 返回“TypeError：null 不是对象”

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 为空的重构之后。我的理解是ListEmptyComponent 应该可以处理...

如何防止keyExtractor 出现此错误？

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

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

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

Answer 1

您应该检查 ID 是否为空

在密钥提取器中

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

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

这样你就可以知道你正在逼近一个现有的值并避免异常击球

阅读更多关于Ternary Operator