Reactnativeflatlist僅從firestore回傳一項-有解無憂

我是 React Native 的新手。我正在使用平面串列來呈現來自 firebase (v9) 的資料。

一切正常，沒有任何錯誤，但串列僅顯示一項。在搜索不同的主題后，我認為問題出在 keyExtractor 上。但我不知道如何解決它。

代碼中的密鑰提取器：

keyExtractor={item => item.id}

這是代碼：

 const Liste = () => {
  const [users, setUsers] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [isLoading, setIsLoading] = useState(false);

const querySnapshot = await getDocs(collection(db, "form"));
querySnapshot.forEach((doc) => {
  setUsers([...users, doc.data()] );
});
    }

    const renderItem = ({ item }) => {
      return(

        <View>
          <View>
            <Text>{`${item.Address}`}</Text>
            <Text>{`${item.Prix}`}</Text>
            <Text>{`${id}`}</Text> 
          </View>
        </View>

      );
     };
  
    const renderLoader = () => {
      return (
        isLoading ?
          <View style={styles.loaderStyle}>
            <ActivityIndicator size="large" color="#aaa" />
          </View> : null
      );
    };
  
    const loadMoreItem = () => {
      setCurrentPage(currentPage   1);
    };
  

   return (
       <View
         <StatusBar backgroundColor="#000" />
      <FlatList
        data={users}
        renderItem={renderItem}
        keyExtractor={item => item.id}
        ListFooterComponent={renderLoader}
        onEndReached={loadMoreItem}
        onEndReachedThreshold={0}
      />
       </View>
   )}
 
 export default Liste;

火庫：

React native flatlist 僅從 firestore 回傳一項

應用程式的螢屏：

React native flatlist 僅從 firestore 回傳一項

你能幫我么？？非常感謝！！

uj5u.com熱心網友回復：

推薦的最佳實踐是運行副作用，例如從useEffect掛鉤內部的服務器獲取資料。


const Liste = () => {
  const [users, setUsers] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [isLoading, setIsLoading] = useState(false);

  const getUsers = async () => {
    let result = [];
    const querySnapshot = await getDocs(collection(db, "form"));
    querySnapshot.forEach((doc) => {
      result.push(doc.data());
    });

    setUsers([...result]);
  };

  useEffect(() => {
    getUsers();
  }, []);

  const renderItem = ({ item }) => {
    return (
      <View>
        <View>
          <Text>{`${item.Address}`}</Text>
          <Text>{`${item.Prix}`}</Text>
        </View>
      </View>
    );
  };

  const renderLoader = () => {
    return isLoading ? (
      <View style={styles.loaderStyle}>
        <ActivityIndicator size="large" color="#aaa" />
      </View>
    ) : null;
  };

  const loadMoreItem = () => {
    setCurrentPage(currentPage   1);
  };

  return (
    <View>
      <StatusBar backgroundColor="#000" />
      <FlatList
        data={users}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
        ListFooterComponent={renderLoader}
        onEndReached={loadMoreItem}
        onEndReachedThreshold={0}
      />
    </View>
  );
};

export default Liste;

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/415663.html

標籤：

上一篇：Flutter-我正在為我的電子商務應用程式創建一個購物車，并希望將產品從購物車集合轉移到firestore中的訂單集合

下一篇：使網路推送通知顯示更長時間