在ReactApp中包含firebase時出現TypeError

應用程式.js

import { useState, useEffect } from "react";
import "./styles.css";
import { Button, TextField } from "@mui/material";
import List from "./List";
import db from "./firebase.js";

export default function App() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState("");
  useEffect(() => {
    db.collection("todos").onSnapshot((snapshot) => {
      setTodos(snapshot.docs.map((doc) => doc.data().todo));
    });
  }, []);

  const addtodo = (event) => {
    setTodos([...todos, input]);
    event.preventDefault();
    setInput("");
    console.log(todos);
  };

  return (
    <>
      <div className="App">
        <h1>TODO LIST</h1>
        <form>
          <TextField
            value={input}
            onChange={(event) => setInput(event.target.value)}
            id="standard-basic"
            label="TODO"
            variant="standard"
            color="secondary"
          />
          <Button
            variant="contained"
            disabled={!input}
            type="submit"
            onClick={addtodo}
          >
            ADD TODO
          </Button>
        </form>
      </div>
      <ul>
        {todos.map((todo) => (
          <List text={todo} />
        ))}
      </ul>
    </>
  );
}

串列.js

import React from "react";
import { ListItemButton, ListItemText } from "@mui/material";

function List(props) {
  return (
    <div>
      <ListItemButton component="a" href="#simple-list">
        <ListItemText primary={props.text} />
      </ListItemButton>
    </div>
  );
}

export default List;

firebase.js

    import * as firebase from "firebase/app";
import "firebase/firestore";

const firebaseApp = firebase.initializeApp({
  apiKey: "AIzaSyCLCvoOwXwcZcZ20S1rW4g8LCLxGiXsk3Y",
  authDomain: "todo-835e4.firebaseapp.com",
  projectId: "todo-835e4",
  storageBucket: "todo-835e4.appspot.com",
  messagingSenderId: "719788228877",
  appId: "1:719788228877:web:a517acaef495f8ae3b3044"
});

const db = firebaseApp.firestore();

export { db };

這是我得到的錯誤：

TypeError
firebase.initializeApp is not a function
$csb$eval
/src/firebase.js:4:29
  1 | import * as firebase from "firebase/app";
  2 | import "firebase/firestore";
  3 | 
> 4 | const firebaseApp = firebase.initializeApp({
    |                             ^
  5 |   apiKey: "AIzaSyCLCvoOwXwcZcZ20S1rW4g8LCLxGiXsk3Y",
  6 |   authDomain: "todo-835e4.firebaseapp.com",
  7 |   projectId: "todo-835e4",

我嘗試了 stackoverflow 中給出的大部分解決方案，但仍然無法解決。我什至將 firebase 的版本更改為舊版本仍然沒有解決方案。因此，如果有人可以查看我的代碼并解決它，請在此處發布。

這是代碼和框：https ://codesandbox.io/s/todo-with-firebase-3fpup ? file =/ src/firebase.js

uj5u.com熱心網友回復：

我的 firebase.js 和你的有點不同，看看：

import firebaseApp from 'firebase/app';
import { firebase } from "./firebase"

    firebaseApp.initializeApp({
        apiKey: '',
        authDomain: '',
        //...
    })

export const db = firebaseApp.firestore();

uj5u.com熱心網友回復：

firebase 有一些更新，它現在是模塊化的，所以你要做的是將它們作為函式從 firebase 匯入。這是您的代碼應該是什么樣子。

Firebase.js

import { initializeApp, getApp, getApps } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "AIzaSyCLCvoOwXwcZcZ20S1rW4g8LCLxGiXsk3Y",
  authDomain: "todo-835e4.firebaseapp.com",
  projectId: "todo-835e4",
  storageBucket: "todo-835e4.appspot.com",
  messagingSenderId: "719788228877",
  appId: "1:719788228877:web:a517acaef495f8ae3b3044"
}
const app = !getApps().length ? initializeApp(firebaseConfig) : getApp(); 

const db = getFirestore();
export default app;
export { db };

標籤：反应 火力基地 谷歌云firestore

上一篇：型別錯誤：listingsRef.add不是函式。（在“listingsRef.add(updatedUploadObjects)”中，“listingsRef.add”未定義）

下一篇：如何在DjangoRestFrameworkAPI中將manytomanyfield作為物件回傳