База данных Firebase в реальном времени не обновляется

#reactjs #firebase #firebase-realtime-database

Вопрос:

Я пытаюсь создать простую форму и помещаю вводимые пользователем данные в базу данных firebase в реальном времени.

ниже приведен мой код

Form.js:

 import React, { useState } from "react";
import { db } from "../firebase";

const Form = () => {
    const [name, setName] = useState("");
    const [location, setLocation] = useState("");

    const handleSubmit = (e) => {
        e.preventDefault();
        db.collection('form').add({
            name: name,
            location: location,
        })
        .then(() => {
            console.log("Form is submitted");
        }).catch(error => {
            alert(error.message);
        });

        setName("");
        setLocation("");
    };
    return (
        <form className="form" onSubmit={handleSubmit}>
            <h1>Black eye Form</h1>
            <label>Name</label>
            <input placeholder="name" value={name} onChange={(e) => setName(e.target.value)} />
            <label>Location</label>
            <input placeholder="location" value={location} onChange={(e) => setLocation(e.target.value)} />
            <button type="submit">Submit</button>
        </form>
    );
}

export default Form;

firebase.js:

 import firebase from "firebase";

var firebaseApp = firebase.initializeApp({
  apiKey: "XXXXXXXXXXXXXX",
  authDomain: "XXXXXXXXXXXXXX",
  databaseURL: "XXXXXXXXXXXXXX",
  projectId: "XXXXXXXXXXXXXX",
  storageBucket: "XXXXXXXXXXXXXX",
  messagingSenderId: "XXXXXXXXXXXXXX",
  appId: "XXXXXXXXXXXXXX"
})
var db = firebaseApp.firestore();
export { db };

Я установил firebase в свой терминал с помощью npm install -s firebase

Но моя база данных firebase в реальном времени не обновляется. Также я не получаю "Form is submitted" сообщение в своей консоли.регистрируйтесь при отправке формы.

РЕДАКТИРОВАТЬ: мой код работает, когда я использую Cloud Firestore, но он не работает с базой данных в реальном времени. Что-то не так с моим кодом? или есть что-то, что я делаю, это только позволяет обновлять облачный firestore, а не базу данных в реальном времени

1. Вы установили правила, разрешающие чтение и запись на панели мониторинга базы данных в реальном времени?

2. Вы проверяли console , например, можете ли вы добавить, если у вас появятся какие-либо заметные ошибки, и в вашем коде указано console.log("Form is submitted") , когда данные формы добавляются в db . Проверьте, регистрируется ли это утверждение или нет, когда вы отправляете свою форму.

3. @JamesMcGlone да. Я использую тестовый режим, который, я думаю, дает возможность читать и записывать в базу данных

4. @GayatriDipali я тоже не получаю сообщение на консоли.

5. Пожалуйста, отредактируйте вопрос, чтобы показать код, который работает не так, как вы ожидаете. Если RTDB не работает, тогда покажите код для RTDB, а не Firestore. У них разные API.

Ответ №1:

Я скопировал ваш код в codesandbox и попробовал, и это сработало, снимок экрана firestore:

И консоль code sandbox pic:

Тогда есть только один шанс, что, возможно, вы испортили свой импорт, например ../ firebase

1. вы проверили свой импорт

2. если мое решение сработало для вас, подумайте о принятии моего ответа

3. Да, это работает, если я использую cloud firestore, но не работает, если я использую базу данных в реальном времени. Есть ли какая-то особая причина для этого??

4. Да, потому что в вашем firebase.js файле вы закодировали это: var db = firebaseApp.firestore(); так что, если вы хотите использовать базу данных в реальном времени, вам придется выполнять конкретную реализацию не путем инициализации firestore