JavaScript Map 函數將對象傳遞給模板文字中的另一個函數

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>