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