Question

我正在尝试制作一个简单的表格，并将用户输入的数据放入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而不是实时数据库成为可能

Answer 1

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

和代码沙箱控制台图片：

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

Firebase实时数据库未更新

1 个答案: