Question

更新代码

这让我发疯了……我正在创建一个博客应用（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>

Answer 1

以防万一将来有人遇到相同的问题，这是解决方案。在editbutton函数上，我使用了posts.on('value', function(snapshot) {...}，因此每次我在监听更改时运行此函数时，{}中的代码块都在运行...因此，我不得不使用{{ 1}}。 .once（）无需监听更改

摘自Firebase文档：

听取价值事件要读取路径中的数据并侦听更改，请使用firebase.database的on（）或Once（）方法。参考观察事件。

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

1 个答案: