来自函数的数据在第一次加载时为空

Question

我正在使用另一个文件中的函数从 Firebase 获取数据。但是，第一次加载应用程序时，我没有获取数据。数据很好。当我在将它添加到变量后立即写入控制台时，我看到了它们。但是，Return 不会 return 它们并且 return 只是一个空字段。

如果我在加载后编辑并保存文件，则会刷新应用程序并加载数据。这个解决方案是否正确？那我想在那里有更多的功能。

const Page = () => {
  const [categories, setCategories] = useState([]);

  const fetchMainCategories = async () => {
    const results = placesB.getMainCategories();
    setCategories(results);
  };

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

}
export default Page;

class Categories {
    getMainCategories(){
        let val = [];
        const reference = query(ref(db, 'categories/1/'));
        onValue(reference, (snapshot) => {
            val = snapshot.val();
            console.log(val); // It always lists the data here
        });
        return val; // HERE IS THE PROBLEM. On the first load is this empty!
    }
}
const cats = new Categories();
export default cats;

请问有人能帮帮我吗？

Answer 1

尝试设置条件，如 if(val) then return val....

Answer 2

onValue() returns 数据异步，因此数组总是返回空。由于您只需要获取一次数据，因此请使用 get() 而不是 onValue():

class Categories {
    // async 
    async getMainCategories() {
        const reference = query(ref(db, 'categories/1/'));
        const snap = await get(reference);
        return snap.val();
    }
}

然后你调用这个方法如下：

const fetchMainCategories = async () => {
  // await here
  const results = await placesB.getMainCategories();
  console.log(results);
  setCategories(results);
};

来自函数的数据在第一次加载时为空

Data from function is null on first load

reactjs

react-native

firebase-realtime-database

expo