仅在数据存在时渲染 FlatList

Question

我运行一个 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>
  );
};

但是，目前，我必须使用三元运算符进行检查，例如 FlatList 中的 data? data.me.friends: null 以避免 Typescript 错误。如果查询失败，并且数据为空，它会扰乱整个性能，我也将不得不在白名单项组件中使用多个 if-else。

所以我正在寻找最好的方法，以便只有在突变成功时才将数据传递到平面列表中。我可以为此使用 onCompleted，但我不确定如何组织它，以便在出现错误时不会从主 return 显示平面列表。

此外，目前，我对列表的所有元素使用相同的键，但显然不应该那样

Answer 1

你试过了吗data={data?.me?.friends}

你也可以使用这个语法data={data ? data?.me?.friends : []}

Answer 2

您必须用作

<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 || []} 你必须使用我已经在代码中提到的这个 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining 这个link 也会有用

Answer 3

当你有数据时渲染你的列表，这样，当渲染较少的东西时你也会有更好的性能所以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()}
      />
}

仅在数据存在时渲染 FlatList

render FlatList only when data is present

javascript

typescript

reactjs

react-native

react-native-flatlist