点击按钮后遍历对象数组新增书籍时重复添加单元格问题如何解决

你现在的代码存在3个核心问题导致出现多生成单元格的现象：

• 重复绑定点击事件：你把submitBtn.addEventListener('click', addBook)写在了addBook回调函数内部，每次点击提交按钮都会额外多注册一次点击事件。第二次点击时会触发2次addBook执行，第三次点击触发3次，执行次数叠加后自然会生成超出预期的单元格
• 书籍数组局部定义：myLibrary数组被定义在addBook函数内部，每次触发提交都会被重置为空数组，无法持久化存储你之前添加的所有书籍信息
• 重复渲染全量书籍：每次提交都遍历整个数组重新生成所有书籍的单元格，没有做容器清空或者增量渲染的处理，即使没有重复绑定的问题，也会出现旧书籍重复渲染的情况

调整逻辑如下：

1. 将书籍存储数组、提交按钮事件绑定移到函数外部，避免重复注册事件和数据丢失
2. 采用增量渲染逻辑，每次新增书籍仅生成对应1个单元格，不需要遍历全量数组
3. 补充单元格内容填充逻辑，展示书籍的书名、作者、页数信息

修复后的完整代码：

// 全局存储所有书籍数据
let myLibrary = [];
// 全局绑定提交事件，只绑定1次
const submitBtn = document.querySelector('.submit-btn');
submitBtn.addEventListener('click', addBook);

const addBook = (ev) => {
    ev.preventDefault();
    // 收集当前输入的书籍信息
    let bookInfo = {
      title: document.getElementById('title').value,
      author: document.getElementById('author').value,
      pages: document.getElementById('pages').value,
    }
    // 存入全局数组
    myLibrary.push(bookInfo);
    // 增量生成单个单元格
    const container = document.getElementById('book-shelf');
    const div = document.createElement('div');
    div.classList.add('cell');
    // 填充书籍信息
    div.innerHTML = `
      <p>书名：${bookInfo.title}</p>
      <p>作者：${bookInfo.author}</p>
      <p>页数：${bookInfo.pages}</p>
    `;
    container.appendChild(div);
    // 可选：提交后清空输入框
    document.getElementById('title').value = '';
    document.getElementById('author').value = '';
    document.getElementById('pages').value = '';
}

如果后续有全量刷新书架的需求（比如需要支持删除书籍后重新渲染），可以单独封装一个renderShelf函数，每次调用时先清空容器再遍历myLibrary全量生成单元格即可。

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