我正在制作评论系统。我的问题是，当我发表评论并重新加载页面时，评论已不再是。我在做什么错？

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

这是我从数据库的注释表格中 离开。

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