由于 'undefined' 值，无法检索数据

Question

在我的网站上，我列出了电影和电视剧，用户可以分享他们对它们的评论。用户可以添加评论，但是在接收评论时，会返回未定义的值。（我正在尝试从 movieComment 获取评论。movieComment 存储电影的评论）

var show = qs["movieId"];
/* show variable is giving my movie's ID and it is 1 */
btnComment.addEventListener('click', (e) => {
    var movieComment = document.getElementById('textComment').value;
    push(child(firebaseRef, 'Movies/' + show + '/movieComment/'), movieComment) {
        movieComment: movieComment
    };
});

function AddItemsToTable2(comment) {
    const comments = `
              <td>Alan Smith</td>
              <td><i class="fa fa-star" style="color:rgb(91, 186, 7)"></i></td>
              <td>${comment}<h6>[May 09, 2016]</h6></td>
            `;
    html = comments;
    body2.innerHTML += html;
}

}

function AddAllItemsToTable2(TheComments) {
    body2.innerHTML = "";
    TheComments.forEach(element => {
        AddItemsToTable2(element.movieComment);
    });
}

function getAllDataOnce2() {
    var show = qs["movieId"];
    get(child(firebaseRef, 'Movies/' + show + '/movieComment')).then((snapshot) => {
        var comments = [];
        comments.push(snapshot.val());
        console.log(comments);
        AddAllItemsToTable2(comments);

    });

}

window.onload = (event) => {
    getAllDataOnce2();

};

Console.log(电影)

未定义的错误：

Answer 1

关注这个功能：

function AddAllItemsToTable2(TheComments) {
    body2.innerHTML = "";
    TheComments.forEach(element => {
        AddItemsToTable2(element.movieComment);
    });
}

这里的TheComments对象是Record<string, string>[]:

TheComments = [{
  "-Mstwhft8fKP6-M2MRIk": "comment",
  "-Mstwj5P2TD_stgvZL8V": "a comment",
  "-MstwjxvmkNAvWFaIejp": "another comment"
}]

当你迭代这个数组时，你最终得到一个没有 movieComment 属性的元素对象，这就是为什么当你将它提供给 AddItemsToTable2 时你得到 undefined.

要解决此问题，您需要更改 assemble TheComments 对象的方式：

function AddAllItemsToTable2(TheComments) { // TheComments: ({id: string, text: string})[]
    body2.innerHTML = "";
    TheComments.forEach(commentObj => AddItemsToTable2(commentObj.text));
}

function getAllDataOnce2() {
    const show = qs["movieId"];
    get(child(firebaseRef, 'Movies/' + show + '/movieComment'))
        .then((snapshot) => {
            const comments = [];
            snapshot.forEach(childSnapshot => {
                comments.push({
                    id: childSnapshot.key,     // store this for linking to database/anchors
                    text: childSnapshot.val()
                });
            });
            console.log(comments);
            AddAllItemsToTable2(comments);
        });
}

另外一点，使用 innerHTML 时要注意 XSS 风险，并尽可能对任何用户生成的内容使用 innerText。此外，您应该将评论内容包装在 table 行中，以便正确连接评论。

function AddItemsToTable2(commentObj) {
    const commentEle = document.createElement('span');
    commentEle.id = `comment_${commentObj.id}`;
    commentEle.innerText = commentObj.text;
    
    const commentRowHTML = `
            <tr>
              <td>Alan Smith</td>
              <td><i class="fa fa-star" style="color:rgb(91, 186, 7)"></i></td>
              <td>${commentEle.outerHTML}<h6>[May 09, 2016]</h6></td>
            </tr>`;
    body2.innerHTML += commentRowHTML;
}

function AddAllItemsToTable2(TheComments) {
    body2.innerHTML = "";
    TheComments.forEach(commentObj => AddItemsToTable2(commentObj));
}

使用上面的代码块，你现在可以将#comment_-MstwjxvmkNAvWFaIejp添加到当前页面的URL的末尾到link到“另一个评论”的评论直接类似于Whosebug的方式link评论。

由于 'undefined' 值，无法检索数据

can't retrieve data because of 'undefined' value

javascript

firebase

firebase-realtime-database