JavaScript映射函数将对象传递给模板文字中的另一个函数

Question

我具有以下函数，在其中使用map函数迭代数组。我想将票证对象传递给sendTicketToArchive函数。下面的代码引发异常，表明这是不可能的，并且对象未定义。我该如何实现？

function updateUI(allTickets) {    
    let allTicketsAttributes = allTickets.map((ticket,index) => {
        return `
                <div class="ticket">
                    Subject: ${ticket.Subject}
                    <p>Submitted at: ${ticket.Date}</p>
                    <p>Priority: ${ticket.Priority}</p>
                    <p>Description: ${ticket.Description}</p>
                    <div id="ticketButtons">
                        <button onclick='cancelTicket("${ticket.ticketId}")'>Cancel</button>
                        <button onclick='sendTicketToArchive(${ticket})'>Remove</button>
                    </div>
                </div>
               `
    })
        allTicketsUL.innerHTML = allTicketsAttributes.join('')
}

Answer 1

您正在构建字符串，因此需要对对象进行字符串化，以便可以将其正确传递给sendTicketToArchive()函数。尝试使用以下示例：（这是您的代码，但做了一些修改，我使用了JSON.stringify()）

function updateUI(allTickets) {    
    let allTicketsAttributes = allTickets.map((ticket,index) => {
        return `
                <div class="ticket">
                    Subject: ${ticket.Subject}
                    <p>Submitted at: ${ticket.Date}</p>
                    <p>Priority: ${ticket.Priority}</p>
                    <p>Description: ${ticket.Description}</p>
                    <div id="ticketButtons">
                        <button onclick='cancelTicket("${ticket.ticketId}")'>Cancel</button>
                        <button onclick='sendTicketToArchive(${JSON.stringify(ticket)})'>Remove</button>
                    </div>
                </div>
               `
    });
    console.log(allTicketsAttributes.join(''));
}

updateUI([
  {Subject: 'sub1', Date: 'date1', Priority: 'prio1', Description: 'desc1', ticketId: 1},
  {Subject: 'sub2', Date: 'date2', Priority: 'prio2', Description: 'desc2', ticketId: 2}
]);

Answer 2

通过这种方式，您只发送ticket.toString，应该有全局可用的变量名称，例如

let allTicketsGlobal
function updateUI(allTickets) {    
  allTicketsGlobal = allTickets    
  let allTicketsAttributes = allTickets.map((ticket,index) => {
...
<button onclick='sendTicketToArchive(allTicketsGlobal[${index}])'>Remove</button>