Firebase 数据消耗

Question

嘿谁能帮我如何从 firebase 云存储中获取数据这是我的代码，firebase 配置和 app.js 我无法读取数据，没有错误，但在 localhost:3000 中完全是空白页

这是配置firebase.js

// Import the functions you need from the SDKs you need
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

const firebaseApp = firebase.initializeApp({
  apiKey: "AIzaSyCZZYaao5CIGfUG5wXZpljv6wpirnLismo",
  authDomain: "instagram-clone-2072b.firebaseapp.com",
  projectId: "instagram-clone-2072b",
  storageBucket: "instagram-clone-2072b.appspot.com",
  messagingSenderId: "689371138987",
  appId: "1:689371138987:web:ccfc3fb76d788c1ff160ee",
  measurementId: "G-T56FW86XMM",
});

// const firebaseApp = initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
const auth = firebase.auth();
const storage = firebase.storage();

export { db, auth };
// Initialize Firebase
// const app = initializeApp(firebaseApp);
// const analytics = getAnalytics(app);

这是主要的 app.js

import React, { useState, useEffect } from "react";
import { Row, Col, Container } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import Posts from "./Posts";
import { db } from "./firebase";

function App() {
  const [post, setPosts] = useState([]);

  // useEffect(() => {
  //   db.collection("posts").onSnapshot((snapshot) => {
  //     setPosts(snapshot.docs.map((doc) => doc.data()));
  //   });
  // }, []);

  const fetchposts = async () => {
    const response = db.collection("posts");
    const data = await response.get();
    data.docs.forEach((item) => {
      setPosts([...post, item.data()]);
    });
  };

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

  return (
    <div className="App">
      <section>
        <div className="app_header">
          <img
            className="app__image"
            src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png"
            alt="cannot render"
          />

          <h3 className="user_signing">LOGIN/LOGOUT</h3>
        </div>
      </section>

      <section>
        {post.map((posting) => (
          <Posts
            username={posting.username}
            caption={posting.caption}
            image={posting.image_url}
          />
        ))}
      </section>
    </div>
  );
}

export default App;

这是 firestore 的数据库集合

Answer 1

您需要明确导入 Firebase 存储 SDK 才能像 Auth 和 Firestore 一样使用它。尝试在 firebase.js 中添加以下导入：

import "firebase/compat/storage";

Firebase 数据消耗

Firebase Data consumtion

javascript

firebase

reactjs

firebase-storage