Question

对于我的一生，我无法获得它来呈现我从数据库中提取的数据。

这是代码

function assetList(){
  const [assetL, setAssetL] = useState([]);
  const [errors, setErrors] = useState("");

  const getAssets = async () =>{
    try{
      const list = [];
      console.log("Break");
      db.collection("assets").get().then(function(querySnapshot){
        querySnapshot.forEach(function(doc){
            list.push(doc.data());
        });
      });
      //problem
      setAssetL([...list]);
      //problem
      console.log("list");
      console.log(list);
      console.log("AssetL");
      console.log
    } catch (e) {
      setErrors("Failed To Load Data");
    }
  };
   useEffect(() => {
     getAssets();
   }, []);
   console.log(assetL);

  return(
    <SafeAreaView style = {styles.Heading}>
      <View style = {styles.Heading}>
        <Text style = {styles.headText}>Asset List</Text>
      </View>
        <FlatList
        data = {assetL}
        renderItem={({item}) => <Text>{item.default}</Text>}
        />
    </SafeAreaView>
  );

}

除了将应用程序的此页面扔到一起的笨拙方式之外，我至少已解决了最紧迫的问题，那就是setAssetL实际上并未设置assetL const。谁能解释为什么会这样以及如何解决？

Answer 1

对于getAssets函数，请执行以下操作：

const getAssets = async () =>{
   try {
      const list = [];
      console.log("Break");
      db.collection("assets").get().then(function(querySnapshot){
         querySnapshot.forEach(function(doc){
            list.push(doc.data());
         });
         setAssetL(list);
      });
      ...
   } catch (e) {
      setErrors("Failed To Load Data");
   }
};

您的代码无法正常工作，因为db.collection("assets").get()函数返回了一个Promise，并且您在期望它是同步的同时异步处理了它。

Here，您可以阅读有关异步功能的更多信息

如何在React Native中显示来自Firebase Firestore的数据

1 个答案: