如何用原生JavaScript渲染组件？insertAdjacentHTML遇undefined问题

出现这种情况，大概率是变量引用错误或属性名不匹配，以下是具体排查和解决方法：

常见错误场景及修复 #

1. forEach回调未接收数组元素参数 #

这是最容易犯的错误：遍历数组时没把当前元素传入回调函数，导致模板里的变量找不到对应值。

错误示例：

const items = [{ name: '笔', price: 2 }, { name: '本', price: 5 }];
const container = document.getElementById('container');

// 错误：回调没接收item参数，模板里的item是undefined
items.forEach(() => {
  container.insertAdjacentHTML('beforeend', `<div>${item.name} ￥${item.price}</div>`);
});

修复：

items.forEach(item => { // 这里必须接收item参数
  container.insertAdjacentHTML('beforeend', `<div>${item.name} ￥${item.price}</div>`);
});

2. 属性名拼写/大小写不匹配 #

模板里的属性名和对象实际的属性名不一致，比如对象里是productTitle，模板里写title，自然会返回undefined。

错误示例：

const products = [{ productTitle: '耳机', productPrice: 199 }];

products.forEach(prod => {
  // 错误：属性名和对象里的不匹配
  container.insertAdjacentHTML('beforeend', `<div>${prod.title} ￥${prod.price}</div>`);
});

修复：严格对齐对象属性名

products.forEach(prod => {
  container.insertAdjacentHTML('beforeend', `<div>${prod.productTitle} ￥${prod.productPrice}</div>`);
});

3. 遍历的不是对象数组 #

如果你的数组里不是对象（比如是字符串、数字或undefined），那访问属性自然会报错。先打印数组确认结构：

console.log(yourArray); // 检查每个元素是不是预期的对象

完整正确示例 #

// 模拟你的对象列表
const bookList = [
  { id: 1, bookName: 'JavaScript高级程序设计', author: 'Nicholas C. Zakas' },
  { id: 2, bookName: '你不知道的JavaScript', author: 'Kyle Simpson' }
];

const bookContainer = document.getElementById('book-container');

// 正确渲染逻辑
bookList.forEach(book => {
  const bookCard = `
    <div class="book-card">
      <h4>${book.bookName}</h4>
      <p>作者：${book.author}</p>
      <small>ID：${book.id}</small>
    </div>
  `;
  bookContainer.insertAdjacentHTML('beforeend', bookCard);
});

排查步骤总结 #

• 确认forEach回调函数正确接收了数组元素参数
• 核对模板中属性名与对象实际属性名的拼写、大小写完全一致
• 用console.log打印数组，确认每个元素是预期的对象结构
• 检查模板字符串的语法：确保用${变量}插入属性，不要用引号包裹变量

内容的提问来源于stack exchange，提问作者Davi Roque