尝试将 JSON 对象与 JavaScript ES6 模板文字一起使用时出错

Question

我是第一次尝试使用模板文字，但我运行遇到了一个错误，在阅读了一些其他资源后我无法调试。

$.ajax({
    // usual things
    success: function(data) {
        // add a manual note before looping through the ones returned via ajax
        var nowNote = { status: `now`, text: `Now`, created_at: null };
        var notes = data.notes;

        var timeline =  `

            ${noteTemplate({ nowNote })}

        `;
        // take out ${timelineTemplate({ notes })} for now
    }
});

var timelineTemplate = ({ notes }) => {
    return `
        ${notes.map(note => noteTemplate({
            note
        })).join('')}
    `;
}

var noteTemplate = ({ note }) => {
    return `

       ${note.created_at == null ?
           ''
       : `<strong>${moment(note.created_at).format('DD/MM/YYYY HH:mm')}</strong>`}

       <span>${note.text.replace(/(?:\r\n|\r|\n)/g, '<br>')}</span>
    `;
}

控制台上的错误信息是：

Uncaught TypeError: Cannot read property created_at of undefined when trying to do the comparison of note.created_at with null.

它似乎不喜欢使用点符号来访问属性，这让我觉得我做了一些根本性的错误，我现在太无知了，无法调试。

基本上我只想将一个 json 对象传递给模板文字并使用它的属性从中构建一个组件，同时还能够使用条件等

Answer 1

您的问题是您将函数声明为：

var noteTemplate = ({ note }) => {
    return `

       ${note.created_at == null ?
           ''
       : `<strong>${moment(note.created_at).format('DD/MM/YYYY HH:mm')}</strong>`}

       <span>${note.text.replace(/(?:\r\n|\r|\n)/g, '<br>')}</span>
    `;
}

所以它正在检查一个对象，该对象具有名为 note 的属性。

您可以删除声明中的大括号或将类似 {note: nowNote} 的内容作为参数传递，而不仅仅是 note

尝试将 JSON 对象与 JavaScript ES6 模板文字一起使用时出错

Error Trying to use JSON Objects with JavaScript ES6 Template Literals

javascript

ecmascript-6

template-literals