我正在做一个评论系统。 我的问题是当我发表评论并重新加载页面时评论不再存在。 我究竟做错了什么？

Question

我正在做一个评论系统。 我的问题是当我发表评论并重新加载页面时评论不再存在。 我究竟做错了什么？

/ Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const db = getDatabase();

// getting user input from form to store in firebase
const name = document.querySelector('.form--1');
const head = document.querySelector('.form--2');
const message = document.querySelector('.form--3');

这是我从数据库评论表单中获取数据的地方

const postNewComment = function () {

    set(ref(db, 'comments/'), {
        Name: name.value,
        Header: head.value,
        Message: message.value
    }).then(() => {
        console.log('data stored successfully');
    }).catch((error) => {
        console.log('unsuccessful, error ' + error);
    });
};

下面的所有其他内容都是一个 function 来创建一个 html 元素和一个 function 来接收来自数据库的数据并重新加载到 dom 但正如我所说的它工作但一次我离开了。

const postBtn = document.querySelector('.btn--post');

// creates html elements
function elementFromHtml(html) {
    const templat = document.createElement('template');
    templat.innerHTML = html.trim();
    return templat.content.firstElementChild;
}

const postComment = function (e) {
    const sectionComments = document.querySelector('.scroll');
    e.preventDefault();
    postNewComment();

    // reads data from firebase database and post comment to dom
    const dbref = ref(db);

    get(child(dbref, 'comments/')).then((snapshot) => {
        if (snapshot.exists()) {
            const commentData = snapshot.val();
            console.log(commentData);

            const html = `
                <div class="row">
                    <div class="comments">
                    <figure class="comments__shape bg-color">
                        <img
                        src=""
                        alt=""
                        class="comments__image"
                        />
                        <figcaption class="comments__caption">${commentData.Name}</figcaption>
                    </figure>
                    <div class="comments__text">
                        <h3 class="heading-tertiary u-margin-bottom-small f-title">
                        ${commentData.Header}
                        </h3>
                        <p class="comments__story">
                        ${commentData.Message}
                        </p>
                    </div>
                    </div>
                </div>
                `;


            sectionComments.appendChild(elementFromHtml(html));
        } else {
            console.log('no data found');
        }
    }).catch((error) => {
        console.log('unsuccessful, error ' + error);
    });

    // reset feilds
    document.querySelector('.form').reset();

};
postBtn.addEventListener('click', postComment);