Блог

Это ошибка, которую я получаю:- ошибка Это мой первый раз, когда я использую Firebase, поэтому я мало что знаю об этом. Но после просмотра некоторых учебных пособий кажется, что это правильный путь, но ничего не работает. Я использую последнюю версию firebase. Пару раз устанавливал и удалял firebase, но ничего не происходило.

 //App.js
import React, { useState, useEffect } from "react";
import Todo from "./Todo";
import { Button, FormControl, Input, InputLabel } from "@material-ui/core";
import "./App.css";
import db from "./firebase-config";


function App() {
  const [todos, setTodos] = useState([
    
  ]);
  const [input, setInput] = useState("");

  useEffect(() => {
    // this code fires when the app loads
    db.collection("todos").onSnapshot(snapshot => {
      console.log(snapshot.docs.map(doc => doc.data()));
      // setTodos(snapshot.docs.map(doc => doc.data().todo))
    })
  }, [])

  const addTodo = (e) => {
    e.preventDefault();
    setTodos([...todos, input]);
    setInput("");
  };

  return (
    <div className="App">
      <h1>React Todo with Firebase</h1>
      <form>
        <FormControl>
          <InputLabel>✅Write a Todo...</InputLabel>
          <Input onChange={(e) => setInput(e.target.value)} value={input} />
        </FormControl>
        <Button
          disabled={!input}
          type="submit"
          onClick={addTodo}
          variant="contained"
          color="primary"
        >
          Add Todo
        </Button>
      </form>

      <ul>
        {todos.map((todo) => (
         <Todo text={todo} />
        ))}
      </ul>
    </div>
  );
}

export default App;

//firebase-config.js

import firebase from 'firebase';

const firebaseApp = firebase.initializeApp({
    apiKey: "AIzaSsdfsdfBbWj6IbdKr0la5cx4k75fcS_qvMU",
    authDomain: "todo-app-8sdf10.firebaseapp.com",
    projectId: "todo-app-sdf110",
    storageBucket: "todo-app-8sdf10.appspot.com",
    messagingSenderId: "26sdfreact6661358",
    appId: "1:260256sdf358:web:99eafsdfbd6099cb748b7f",
    measurementId: "G-EH6HsdfHRD5R"
});

const db = firebaseApp.firestore();
export default db;
 

Попробуйте изменить свой импорт на:

 import firebase from 'firebase/compat/app';
 

Таким образом, вы можете продолжать использовать существующий код/синтаксис. Хотя я рекомендую ознакомиться с новым модульным SDK, который имеет другой синтаксис, но имеет преимущества в производительности.

Из документации firebase : https://firebase.google.com/docs/firestore/quickstart#web-version-9

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

Затем вы можете инициализировать свое приложение, выполнив следующие действия :

 const firebaseApp = initializeApp({
  apiKey: '### FIREBASE API KEY ###',
  authDomain: '### FIREBASE AUTH DOMAIN ###',
  projectId: '### CLOUD FIRESTORE PROJECT ID ###'
});

const db = getFirestore();
 

Также обратите внимание, что вы не должны делиться переменными конфигурации вашего проекта подобным образом.