如何使用Mailjet在邮件正文中展示动态列表？数组遍历显示异常

问题核心是你在普通JavaScript模板字符串里用了JSX语法，JSX元素本质是React对象，直接插入模板字符串时会被转成[object Object]，而非预期的HTML内容。

正确做法 #

把数组遍历的逻辑改成纯字符串拼接，再用join('')把所有列表项合并成完整的HTML字符串：

修改后的代码片段：

const request = await mailjet
    .post('send', {
        version: 'v3.1'
    })
    .request({
        Messages: [{
            From: {
                Email: "email@gmail.com",
                Name: "Pilot"
            },
            To: [{
                Email: "anotheremail@gmail.com",
                Name: "Brian"
            }],
            Subject: "My first email!",
            TextPart: "This is the text part",
            HTMLPart: `<h3>Order from website</h3>
                        <p>Hi, I would like to order the following: </p>
                        <ul>
                            ${cartItems.map(cartItem => 
                                `<li>${cartItem.name} ${cartItem.quantity}kgs</li>`
                            ).join('')}
                        </ul> 
                        <p>Here are my contact details:</p> 
                        <p>Name: ${firstName} ${lastName}</p>
                        <p>Email: ${email}</p>
                        <p>Mobile: ${mobile}</p>`,
            TemplateLanguage: true
        }]
    });

关键说明 #

1. 去掉JSX的<li key={...}>写法，换成纯字符串模板<li>${...}</li>，这样每个map迭代返回的是字符串，而非React元素对象。
2. 用join('')把map生成的字符串数组合并成一个完整的HTML片段，避免数组默认的逗号分隔符出现在邮件内容里。

内容的提问来源于stack exchange，提问作者Brian Mwangi