Javascript @firebase/数据库：firebase警告：用户回调引发异常。TypeError:无法读取属性'；标题'；空的

更新代码

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

• OnDelete按钮删除单个博客文章。它删除两个前端 和后端。没有错误

• onEditButton编辑一篇博客文章。它也很好用

• 当我第一次编辑一篇文章，然后删除同一篇文章时，它会同时从后端和前端删除，看起来效果不错，但在控制台日志中会抛出错误：

  未捕获类型错误：无法读取null的属性“title”。

  错误消息指向

  storeTitle.value=editPost.title行
  

为什么删除一篇文章后，onEditButton函数会被调用，但只在编辑一次后调用

html:

编辑模式

为了防止将来有人遇到同样的问题，这里是解决方案。 在editbutton函数上，我使用了posts.On（'value'，函数（快照）{…}，所以每次我运行这个函数时，它正在侦听更改，{}中的代码块每次都在运行…因此，我必须使用

posts.On（'value'，函数（快照）{…}

.once（），而不是posts.On，而不是使用

posts.once（'value'，函数（快照）{…}

.once（），而不侦听更改

从firebase文档：

倾听价值事件 要读取路径上的数据并侦听更改，请使用firebase.database.Reference的on（）或once（）方法观察事件

---

查看如何将

onEditButton

和

onDeleteButton

绑定到代码中的按钮会很有帮助。我编辑了上面的代码。我多次单击编辑按钮，删除同一帖子时，都会收到相同次数的错误消息。

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);

            })
    }

}

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