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

【问题标题】：Firebase Storage Context with Storage Data带有存储数据的 Firebase 存储上下文
【发布时间】：2021-09-03 19:31:42
【问题描述】：

我正在使用 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() 立即返回，即使它应该等待直到（因此 .then((data) => { console.log(data) } 为空。

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

谢谢

【问题讨论】：

标签： javascript reactjs firebase-storage react-context

【解决方案1】：

它立即返回的原因是您使用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);
}

【讨论】：