僅在數據存在時渲染 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>
  );
};

但是，目前，我必須使用三元運算符進行data? data.me.friends: null data? data.me.friends: null中的FlatList以避免 Typescript 錯誤。 如果查詢失敗，並且數據是 null，它會擾亂整個性能，我也將不得不在白名單項組件中使用多個 if-else。

因此，我正在尋找最好的方法，以便僅在突變成功時將數據傳遞到 Flatlist 中。 我可以使用onCompleted ，但我不確定如何組織它，以便在出現錯誤時不會從主返回中顯示平面列表。

另外，目前，我對列表的所有元素使用相同的鍵，但顯然不應該那樣

Answer 1

當你有數據時渲染你的列表，這樣，當渲染較少的東西時你也會有更好的性能，所以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()}
      />
}

Answer 2

你試過data={data?.me?.friends}

您也可以使用這種語法data={data? data?.me?.friends: []} data={data? data?.me?.friends: []}

Answer 3

你必須用作

<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>

數據={數據？.我？.朋友|| []}你必須使用我已經在代碼https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining中提到的這個鏈接 這個鏈接也很有用