带有存储数据的 Firebase 存储上下文

Question

我正在使用 Firebase 和 React 并学习如何使用 React 上下文。我创建了一个查询 Firebase 的上下文以从那里获取数据（例如用户的文件 URL）。上下文工作正常，但是，我无法使上下文变为异步。我还没有看到任何这样的例子，我不确定这是否可能。我的代码如下。

StorageContext.js:

import React, { useContext, useEffect, useState } from 'react';
import { auth } from './FirebaseConfiguration';
import fire from './FirebaseConfig';
import { useAuth } from './AuthContext';

const StorageContext = React.createContext();

export function useStorage() {
  return useContext(StorageContext);
}

export function StorageProvider({ children }) {
  const { currentUser } = useAuth();
  const [fileURLs, setFilesURL] = useState([]);

  async function getUserData() {
    var storage = fire.storage();
    var storageRef = storage.ref(currentUser.uid);

    storageRef
      .listAll()
      .then(function (result) {
        result.items.forEach(function (imageRef, i) {
          let temp = filesUploaded;
          temp.push(imageRef.name);
          setFilesUploaded(temp);
        });
        console.log(filesUploaded);
        // console.log(getData(filesUploaded));
        getData(filesUploaded);
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  const value = { getUserData };
  return (
    <StorageContext.Provider value={value}>{children}</StorageContext.Provider>
  );
}

Dashboard.js:

import React, { useState, useEffect } from 'react';
import { useStorage } from './Contexts/StorageContext';

export default function Dashboard() {
  const { getUserData } = useStorage();

  async function getData() {
    await getUserData().then((data) => {
      console.log(data);
    });
  }


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

  return (
    <div>
      console.log('data');
    </div>

Dashbaord.js 运行中的 useEffect 很好，问题是 getUserData() returns 立即执行，即使它应该等到（因此 .then((data) => { console.log(data) }是空的。

是否有可能运行一个上下文异步？还是我遗漏了另一个问题？

谢谢

Answer 1

立即 returns 的原因是您使用 then 而不是 await。将您的函数重写为此，它应该可以工作：

async function getUserData() {
  var storage = fire.storage();
  var storageRef = storage.ref(currentUser.uid);

  const result = await storageRef.listAll();

  result.items.forEach(function (imageRef, i) {
    let temp = filesUploaded;
    temp.push(imageRef.name);
    setFilesUploaded(temp);
  });
  console.log(filesUploaded);
  // console.log(getData(filesUploaded));
  getData(filesUploaded);
}

带有存储数据的 Firebase 存储上下文

Firebase Storage Context with Storage Data

javascript

reactjs

firebase-storage

react-context