平面列表键提取器在数据为 null 时返回"TypeError: null is not an object"

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是否为空

在keyExtractor

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

?如果不返回false，则检查值是否存在

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

阅读更多关于三元运算符