FlatList 未使用 Firestore 快照数组进行渲染答案

【问题标题】：FlatList not rendering with array of arrays of Firestore SnapshotsFlatList 未使用 Firestore 快照数组进行渲染
【发布时间】：2021-02-26 10:55:33
【问题描述】：

我只是想用我的状态 (ListOfProducts) 渲染我的 Flalist，它是一个 FirestoreDocumentSnapshot 数组，如下所示：

但是没有渲染。这是我的代码：

return (
    <View>
      <TouchableOpacity onPress={() => console.log(listOfProducts)}>
        <Text>Log ListOfProducts</Text>
      </TouchableOpacity>
      <View style={{flex: 1}}>
        <FlatList
          style={{flex: 1, width: 200, height: 200}}
          data={listOfProducts}
          keyExtractor={(item, index) => {
            item[index].id;
          }}
          renderItem={({item}) => (
            <View style={{flex: 1}}>
              <Text style={{height: 100, width: 100, backgroundColor: 'red'}}>
                MON CHIBROS
              </Text>
            </View>
          )}
        />
      </View>
    </View>
  );

像这样从 Firestore 获取我的数据：

useEffect(() => {
    const unsubscribe = getUserLocation()
      .then((location) => getProducts(location.coords))
      .catch((e) => {
        throw new Error(e.message);
      });

    const getProducts = async (coords) => {
      console.log('getProducts');
      let nearbyGeocollections = await geocollection
        .limit(10)
        .near({
          center: new firestore.GeoPoint(coords.latitude, coords.longitude),
          radius: 50,
        })
        .get();
      let nearbyUsers = [];

      await nearbyGeocollections.forEach((geo) => {
        if (geo.id !== user.uid) {
          firestore()
            .collection('PRODUCTS')
            .doc(geo.id)
            .collection('USER_PRODUCTS')
            .onSnapshot((product) => {
              nearbyUsers.push(product.docs);
            });
        }
      });
      setLoading(false);
      setListOfProducts(nearbyUsers);
    };

    return () => {
      unsubscribe;
      setListOfProducts([]);
    };
  }, []);

如果有人能指出我的错误，我将不胜感激。

【问题讨论】：

你是如何获取数据的，也许你忘记调用 .data()。还请提及您获取数据以获得答案的方式。
我正在从 Firestore 获取数据。我编辑了我的问题。
感谢您的回复，但我的 DocumentSnapshot 很好，这就是我想要的。在您的回答中，我从每个 DocumentSnapshot 中获取数据。我刚刚给出了答案，我必须重建一个新对象，它现在可以工作了。

标签： javascript react-native google-cloud-firestore react-native-flatlist

【解决方案1】：

您没有使用正确的方法来获取数据。试试这个方法

firestore()
    .collection('PRODUCTS')
    .doc(geo.id)
    .collection('USER_PRODUCTS')
    .onSnapshot((onResult, onError));

function onResult(QuerySnapshot) {
    var nearbyUsers = [];
    QuerySnapshot.forEach(function (doc) {
        nearbyUsers.push(doc.data());
    });

}

function onError(error) {
    console.error(error);
}

在查询快照中可能有多个文档，然后当您对每个文档执行 doc.data() 以从中获取数据时

【讨论】：

【解决方案2】：

我必须重建一组对象才能使其正常工作。

unsubscribe = await nearbyGeocollections.forEach((geo) => {
  if (geo.id !== user.uid) {
    firestore()
      .collection("PRODUCTS")
      .doc(geo.id)
      .collection("USER_PRODUCTS")
      .onSnapshot((product) => {
        nearbyUsers.push({
          id: product.docs[0].id.toString(),
          products: product.docs,
        });
      });
  }
});

我的平面列表：

return (
  <>
    <Animated.FlatList
      pagingEnabled={true}
      legacyImplementation={false}
      data={listOfProducts}
      onScroll={onScroll}
      contentContainerStyle={{ paddingTop: containerPaddingTop }}
      scrollIndicatorInsets={{ top: scrollIndicatorInsetTop }}
      initialNumToRender={5}
      renderItem={(products) => (
        <UserProductsList
          user={user}
          products={products}
          navigation={navigation}
        />
      )}
      keyExtractor={(item) => item.id}
    />
  </>
);

【讨论】：