Firebase資料消耗-有解無憂

嘿，誰能幫我如何從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的資料庫集合

Firebase 資料消耗

uj5u.com熱心網友回復：

您需要顯式匯入 Firebase 存盤 SDK 才能像 Auth 和 Firestore 一樣使用它。嘗試添加以下匯入firebase.js：

import "firebase/compat/storage";

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/450043.html

標籤：javascript 反应火力基地 firebase-存储

上一篇：使用onclick事件時引數串列后未捕獲的SyntaxError:missing)

下一篇：編輯訊息時訊息內容必須為非空字串