@firebase/database：FIREBASE 警告：用户回调引发了异常。 TypeError：无法读取 null 的属性“标题”答案

【问题标题】：@firebase/database: FIREBASE WARNING: Exception was thrown by user callback. TypeError: Cannot read property 'title' of null@firebase/database：FIREBASE 警告：用户回调引发了异常。 TypeError：无法读取 null 的属性“标题”
【发布时间】：2018-11-24 21:35:09
【问题描述】：

更新代码

所以这让我发疯了......我正在创建一个博客应用程序（Vanilla Js + Firebase）。

onDeleteButton 删除单个博客文章。它删除了两个前端和后端。没有错误。
onEditButton 编辑单个博客文章。它也可以正常工作。
当我第一次编辑一个帖子，然后删除同一个帖子时，它会从后端和前端删除，看起来工作正常但在控制台日志中抛出了我和错误： Uncaught TypeError: Cannot read property 'title' of null. 错误消息指向 onEditButton 函数中的 storeTitle.value = editPost.title; 行。

为什么删除帖子后会调用onEditButton函数，但只有编辑过一次？

function onDeleteButton(event) {
    event.preventDefault();
    let id = event.target.parentElement.getAttribute('id');
    let deletePost = document.getElementById(id);
    firebase.database().ref('posts/' + id).remove();
    deletePost.parentNode.removeChild(deletePost);
}

function onEditButton(event) {
    event.preventDefault();
    let editButton = document.getElementById('edit');
    editButton.removeAttribute("hidden");
    let id = event.target.parentElement.getAttribute('id');
    let posts = firebase.database().ref('posts/' + id);
    let storeTitle = document.getElementById('blog-title');
    let storeContent = document.getElementById('blog-content');
    localStorage.setItem("postID", id);
    document.getElementById("blog-id-storage").innerHTML = localStorage.getItem("postID");
    posts.on('value', function(snapshot) {
    let editPost = snapshot.val();
    storeTitle.value = editPost.title;
    storeContent.value = editPost.content;
    });
}


function enterEditingMode() {
    if (document.getElementById('editing-mode-button').innerHTML === "Exit editing mode") {
        exitEditingMode();
    }
    else {

        ...
            addDeleteButton.addEventListener("click", this.onDeleteButton); 
            addEditButton.addEventListener("click", this.onEditButton);

            })
    }

}

html:

<button id="editing-mode-button" onclick="enterEditingMode()" class="btn btn-outline-primary">Editing mode</button>

【问题讨论】：

看看onEditButton和onDeleteButton如何绑定到代码中的按钮会很有帮助
我已经编辑了上面的代码。
我多次点击编辑按钮，删除同一篇文章时，我收到相同次数的错误消息。

标签： javascript firebase

【解决方案1】：

以防万一将来有人遇到同样的问题，这里是解决方案。在editbutton函数上我使用了posts.on('value', function(snapshot) {...}，所以每次我运行这个函数时，一旦它监听变化，{}中的代码块每次都在运行......所以我不得不使用posts.once('value', function(snapshot) {...}而不是posts.on。 .once() 不监听变化

来自 firebase 文档：

监听价值事件要读取路径上的数据并监听更改，请使用 firebase.database 的 on() 或 once() 方法。参考观察事件。

【讨论】：