addEventListner中的Firebase实时数据库集字段

Question

已解决

我是网络开发的新手，我正在尝试用firebase构建一个简单的网络应用程序。

我的问题是，如果我在下面编写addEventListner，我会看到警报，但不会向数据库中添加任何内容，但如果我在全局范围中编写相同的代码行，则会添加字段。

这不起作用：

import { initializeApp } from 'firebase/app';
import { getDatabase, ref, set } from 'firebase/database';
const firebaseConfig = {
// My Firebase config
};
const firebaseApp = initializeApp(firebaseConfig);
const db = getDatabase(firebaseApp);
//adding this reference fixed the issue
const dbRef = ref(db);
document.getElementById("addBtn").addEventListener("click", function() {
alert("test");
let field1 = "10";
let field2 = "10";
let date = "2023-04-10";
set(ref(db, 'score/' + date), {
"field_1": field1,
"field_2": field2
});

});

这正在工作：

import { initializeApp } from 'firebase/app';
import { getDatabase, ref, set } from 'firebase/database';
const firebaseConfig = {
// My Firebase config
};
const firebaseApp = initializeApp(firebaseConfig);
const db = getDatabase(firebaseApp);
let field1 = "10";
let field2 = "10";
let date = "2023-04-10";
set(ref(db, 'score/' + date), {
"field_1": field1,
"field_2": field2
});

Answer 1

您可以尝试将代码包装在一个函数中，然后在事件侦听器函数中调用该函数。例如：

import { initializeApp } from 'firebase/app';
import { getDatabase, ref, set } from 'firebase/database';
const firebaseConfig = {
// Your Firebase config here
};
const firebaseApp = initializeApp(firebaseConfig);
const db = getDatabase(firebaseApp);
function addToDatabase() {
let field1 = "10";
let field2 = "10";
let date = "2023-04-10";
set(ref(db, 'score/' + date), {
"field_1": field1,
"field_2": field2
});
}
document.getElementById("addBtn").addEventListener("click", function() {
alert("test");
addToDatabase();
});
// Or
document.getElementById("addBtn").addEventListener("click", () => {
alert("test");
addToDatabase();
});

忠告

为了解决这些类型的问题，我建议在set()方法中添加错误处理，看看它是否抛出了任何错误。您可以通过向set()方法添加第二个参数来实现这一点，该方法是一个回调函数，如果发生错误，将使用错误对象调用该函数。

这里有一个例子：

set(ref(db, 'score/' + date), {
"field_1": field1,
"field_2": field2
}, function(error) {
if (error) {
console.log("Error adding data to database:", error);
} else {
console.log("Data added to database successfully");
}
});