[英]render FlatList only when data is present
I run a graphql query and depending on the data, render a flatList.我运行 graphql 查询并根据数据呈现一个 flatList。
const { data, error } = useGetMyProfileQuery({
//onCompleted: _onCompleted,
onError: _onGetMyProfileQueryError,
});
....
return (
<SafeAreaView style={styles.safeView}>
<Container style={styles.container}>
<View style={styles.listHolder}>
<FlatList
data={data ? data.me.friends : null}
horizontal={false}
renderItem={({ item }) => (
<Friend
friend={item}
onDeleteFriend={onDeleteFriend}
originatorId={data ? data.me.id : null}
/>
)}
keyExtractor={(data: any) => '3'}
ListEmptyComponent={renderEmptyContainer()}
/>
</View>
</Container>
</SafeAreaView>
);
};
However, currently, I have to use ternary operators for checks like data? data.me.friends: null
但是,目前,我必须使用三元运算符进行
data? data.me.friends: null
data? data.me.friends: null
in the FlatList
to avoid Typescript errors. data? data.me.friends: null
中的FlatList
以避免 Typescript 错误。 If the query fails, and the data is null, It disturbs the whole performance and I will have to use multiple if-else within the whitelist item component too.如果查询失败,并且数据是 null,它会扰乱整个性能,我也将不得不在白名单项组件中使用多个 if-else。
So I am looking for the best way such that data is passed into the Flatlist only when the mutation is successful.因此,我正在寻找最好的方法,以便仅在突变成功时将数据传递到 Flatlist 中。 I could use
onCompleted
for that but I am not sure how to organize it such that no flat list is displayed from the main return when there's an error.我可以使用
onCompleted
,但我不确定如何组织它,以便在出现错误时不会从主返回中显示平面列表。
Also, currently, I am using the same key for all elements of the list but it shouldn't be like that obviously另外,目前,我对列表的所有元素使用相同的键,但显然不应该那样
Render your list when you have data, In this way, you will also have better performance when lesser things are rendered so it will be a conditional rendering of your Flatlist
.当你有数据时渲染你的列表,这样,当渲染较少的东西时你也会有更好的性能,所以
it will be a conditional rendering of your Flatlist
。
{data && data.me && data.me.friends.lenght > 0 &&
<FlatList
data={data.me.friends}
horizontal={false}
renderItem={({ item }) => (
<Friend
friend={item}
onDeleteFriend={onDeleteFriend}
originatorId={data ? data.me.id : null}
/>
)}
keyExtractor={(data: any) => '3'}
ListEmptyComponent={renderEmptyContainer()}
/>
}
Did you tried data={data?.me?.friends}
你试过
data={data?.me?.friends}
You can also use this syntax data={data? data?.me?.friends: []}
您也可以使用这种语法
data={data? data?.me?.friends: []}
data={data? data?.me?.friends: []}
You have to used as你必须用作
<SafeAreaView style={styles.safeView}>
<Container style={styles.container}>
<View style={styles.listHolder}>
<FlatList
data={data?.me?.friends || []}
horizontal={false}
renderItem={({ item }) => (
<Friend
friend={item}
onDeleteFriend={onDeleteFriend}
originatorId={data ? data.me.id : null}
/>
)}
keyExtractor={(data: any) => '3'}
ListEmptyComponent={renderEmptyContainer()}
/>
</View>
</Container>
</SafeAreaView>
data={data?.me?.friends ||数据={数据?.我?.朋友|| []} you have to use this that I have already mentioned in the code https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining This link will also useful
[]}你必须使用我已经在代码https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining中提到的这个链接 这个链接也很有用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.