由于“未定义”值而无法检索数据

Question

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

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。

要解决此问题，您需要更改组合 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。此外，您应该将评论内容包装在表格行中，以便正确连接 cmets。

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

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