在reactjs中显示来自防火墙存储的数据

Question

我已经将PDF文档手动上传到firebase存储区(dataset文件夹)，我正在尝试在reactjs中下载和检索它们，到目前为止，我能够下载这些urls，它们显示在控制台中，但不确定它们为什么不显示在页面中。请帮我修一下这个。

import React from 'react';
import { storage } from "../config/firebase";
import { ref, listAll, getDownloadURL } from "firebase/storage"

function ForwardPE() {

const fetchImages = async () => {
  const storageRef = await ref(storage, "dataset");
  const result = await listAll(storageRef);

  const urlPromises = result.items.map((imageRef) => getDownloadURL(imageRef));

  return Promise.all(urlPromises);
};

const loadImages = async () => {
  const urls = await fetchImages();
  console.log(urls);
};

loadImages()
      
  return (
    <div className="file-grid">
      <div className="file-wrap">
        <h1>PDF FILES HERE</h1>
      </div>
  </div>
  );
};

export default ForwardPE;

Firebase.js

import { initializeApp } from "firebase/app";
import {getFirestore} from 'firebase/firestore'; 
import { getAuth } from "firebase/auth";
import { getAnalytics } from "firebase/analytics";
import { getStorage } from "firebase/storage";



const firebaseConfig = {
  apiKey: "AIzaSyAqW6kUwy4VGS8iBb72lXqK0v3ZnxR_Ohk",
  authDomain: "ai-web-app-1eba6.firebaseapp.com",
  projectId: "ai-web-app-1eba6",
  storageBucket: "ai-web-app-1eba6.appspot.com",
  messagingSenderId: "488293461041",
  appId: "1:488293461041:web:62aec35f6d5e09a0e63910"
};

const firebaseApp = initializeApp(firebaseConfig); 
export const projectFirestore = getFirestore();

export const storage = getStorage();
export const firebaseAuth = getAuth(firebaseApp);
export const firebaseAnalytics = getAnalytics(firebaseApp); 

Answer 1

您不应该公开地共享您的firebase配置对象。现在我们都可以访问你的数据库了。我建议你做个新项目。但这可能是你问题的解决方案。只是一个简单的useState

import React, { useState } from 'react';
import { storage } from "../config/firebase";
import { ref, listAll, getDownloadURL } from "firebase/storage"

function ForwardPE() {

const [urls, setUrls] = useState([]);

const fetchImages = async () => {
  const storageRef = await ref(storage, "dataset");
  const result = await listAll(storageRef);

  const urlPromises = result.items.map((imageRef) => getDownloadURL(imageRef));

  return Promise.all(urlPromises);
};

const loadImages = async () => {
  const _urls = await fetchImages();
  console.log(_urls);
  setUrls(_urls);
};

loadImages()
      
  return (
    <div className="file-grid">
      <div className="file-wrap">
        {urls.map((url, index) => (
          <h1 key={index}>{url}</h1>
        ))}
      </div>
  </div>
  );
};

export default ForwardPE;