时间戳

首页 > 解决方案 > 更新 Firebase 数据的 JavaScript 函数覆盖当前数据，即使我的循环检查空/空值

javascript - 更新 Firebase 数据的 JavaScript 函数覆盖当前数据，即使我的循环检查空/空值

问题描述

所以我正在实现一个更新功能，以便我的用户可以更新他们的标题值。但是，如果其中一个空格留空，则数据将被覆盖为数据库中的空字符串。我只想覆盖所需的数据，如果输入的长度为空或 0，则不处理数据。

JavaScript 函数：

/*-----------------------------------UPDATE DATABASE DATA--------------------------------------------------------------*/

function getUpdateId(element){

    var postId = $(element).closest('div').attr('id');
    console.log(postId);
    var submit = document.getElementById("uploadButtonUpdate");

    submit.onclick = function(){

        var postData = {

            title: $('#imageTitleUpdate').val(),
            medium: $('#imageMediumUpdate').val(),
            dimensions: $('#imageDimensionsUpdate').val(),
            year: $('#imageYearUpdate').val(),
            additional: $('#additionalInfoUpdate').val()
        };


        //Check if a json element is null
        for (data in postData){
            if(postData[data] != null){
            firebase.database().ref().child('Posts/' + postId).update(postData);
            }
        }
            location.reload();

    }
}

标签： javascriptjsonfirebasefirebase-realtime-database

解决方案

你在你的onClick函数中试图做的是：

  1. 您从 UI 用户获取数据并从中创建postData对象
  2. 您遍历对象的属性以检查其中是否有任何一个空值/缺失值（空值或未定义）
  3. 这就是您遇到问题的地方-您正在调用的firebase方法启动网络请求，没有人，甚至是javascript，都不知道该请求何时会带回响应/完成执行，因此它会发送该firebase函数到另一个线程，这样运行firebase函数就不会阻塞单线程javascript运行时。但是，你在一个for...in非常快的循环中运行它。那么会发生什么？

循环中的条件检查第一个属性postData是否为空（根据您的代码），如果不是，它会启动 firebase 函数以将数据发送到另一个线程（线程 1）中的数据库，因为它是一个承诺；然后立即检查下一个属性postData是否为空，如果不是，则启动 firebase 函数以在另一个线程（线程 2）中将数据发送到数据库，依此类推。到for...in循环完成时，我们仍然在其他线程中运行 firebase 函数，为每个不为空的属性值更新数据库路径。这就是您在数据库中看到的内容存在问题的原因。

现在，我所做的是删除该 firebase 调用并使其仅运行一次。该for...in循环将检查具有虚假值的数据并告诉用户缺少某些内容，但如果没有任何内容丢失，它将仅使用相关数据更新整个数据库路径一次

//Check if a json element is null
let aPropertyValueIsFalsy = false;
for (prop in postData) {
  if (!!postData[prop]) {
    aPropertyValueIsFalsy = true;
    return;
  }
}
if (aPropertyValueIsFalsy == true) {
  // write code to tell user that something is missing
} else {
// send data to database
  firebase
    .database()
    .ref()
    .child("Posts/" + postId)
    .update(postData);
}

推荐阅读