Firebase实时数据库未更新

时间:2020-11-11 14:49:34

标签: 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 };

我已使用npm install -s firebase在终端中安装了Firebase

但是我的firebase实时数据库没有更新。 另外,提交表单时,在console.log中也没有收到"Form is submitted"消息。

编辑:当我使用Cloud Firestore时,我的代码可以工作,但不适用于实时数据库。我的代码有问题吗?或者我正在做的事情只是使更新云Firestore而不是实时数据库成为可能

1 个答案:

答案 0 :(得分:2)

我已将您的代码复制粘贴到codeandbox并尝试了一下,并且有效,firestore的屏幕截图:

proof

和代码沙箱控制台图片: proof2

然后只有一种可能,就是您弄乱了../firebase之类的导入文件