数据没有被推送到 Firebase（不一致的行为）

Question

I'm trying to push suspect records in the firebase database, everything is working correctly, but the pushing part doesn't seem to be working.我正在尝试在 firebase 数据库中推送可疑记录，一切正常，但推送部分似乎不起作用。 It works very rarely, not every time.它很少起作用，不是每次都起作用。 Here is the function:这是函数：

async function storeSuspectData() {
var name = document.getElementById("name").value;
var height = document.getElementById("height").value;
var weight = document.getElementById("weight").value;
var idnumber = document.getElementById("idnumber").value;
var dob = document.getElementById("dob").value;
var crime = document.getElementById("crime").value;
var hypo = document.getElementById("hypo").value;
var gender;

if (document.getElementById("male").checked) {
    gender = 'male';
}
else if (document.getElementById("female").checked) {
    gender = 'female';
}
console.log(sessionStorage.getItem("userKey") + ' ' + name + ' ' + height + ' ' + weight + ' ' + idnumber + ' ' + dob + ' ' + gender + ' ' + crime + ' ' + hypo);

console.log('/users/' + sessionStorage.getItem("userKey") + '/suspectList/');

let token = await database.ref('/users/' + sessionStorage.getItem("userKey") + '/suspectList/');

await token.push().set({
    name: name,
    height: height,
    weight: weight,
    idnumber: idnumber,
    dob: dob,
    gender: gender,
    crime: crime,
    hypo: hypo,
});

alert('Record added successfully');
}

The last alert statement is not getting executed and data is not being pushed最后一条警报语句没有被执行，数据也没有被推送

Here is the database这是数据库

I'm also getting this error on console, but I'm not using document.write() anywhere我也在控制台上收到此错误，但我没有在任何地方使用 document.write()

BrowserPollConnection.ts:480 [Violation] Avoid using document.write().

The page is getting refreshed when I click the button on which the function is called as the button is a submit button in a form.当我单击调用该函数的按钮时，页面正在刷新，因为该按钮是表单中的提交按钮。 I get this我明白了

Navigated to file:///D:/MyPrograms/CredibilityAnalyzer/front-end/pages/selectSuspect.html?name=afs&crime=0&height=1&weight=1&idnumber=1&dob=2021-01-01&hypo=asdf&gender=none

Here is the HTML code:这是 HTML 代码：

<!DOCTYPE html>
<html>

<head>
    <title>Credibility Analyzer</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
        integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="../style/selectSuspect.css">


    <script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-database.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-analytics.js"></script>
    <script src="../script/form2.js"></script>

</head>

<body onload="fillSuspectList()">
    <div class="testbox">
        <form>
            <div class="banner">
                <h1>Credibility Analyzer</h1>
            </div>
            <div class="btn-block">
                <button type="submit" onclick="showInputForm()">Enter new suspect record</button>
                <button type="submit" onclick="showSelectSuspect()">Select suspect</button>
            </div>
            <div class="showInputForm" id="showInputForm" style="display: none;">
                <p>Suspect Information</p>
                <div class="item">
                    <label for="name">Name<span>*</span></label>
                    <input id="name" type="text" name="name" required />
                </div>
                <div class="btn-block">
                    <button type="submit" onclick="storeSuspectData()">SUBMIT</button>
                </div>
            </div>
    
        </form>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>

</html>

Answer 1

It works very rarely, not every time.它很少起作用，不是每次都起作用。

This typically indicates a race condition.这通常表示竞争条件。 In this case I suspect that your storeSuspectData is being called when the user submits a form.在这种情况下，我怀疑您的storeSuspectData在用户提交表单时被调用。 If that's the case: the default behavior for a form is to send the data to the server, and then redirect to a different page.如果是这种情况：表单的默认行为是将数据发送到服务器，然后重定向到不同的页面。 So unless your handler function cancels this default behavior, the page will be redirected and this may/will interrupt the write to the database.因此，除非您的处理程序函数取消此默认行为，否则页面将被重定向，这可能/将中断对数据库的写入。

The solution for this is to cancel the default behavior of the form by calling e.preventDefault() on the event that triggers it, and returning false from the handler.对此的解决方案是通过在触发它的事件上调用e.preventDefault()并从处理程序返回false来取消表单的默认行为。

数据没有被推送到 Firebase（不一致的行为）

问题描述

1 个解决方案

解决方案1
2 已采纳 2021-07-22 07:42:41

数据没有被推送到 Firebase（不一致的行为）

问题描述

1 个解决方案

解决方案1 2 已采纳 2021-07-22 07:42:41

解决方案1
2 已采纳 2021-07-22 07:42:41