Uncaught TypeError:无法读取undefined的forEach属性 瀑布流报错

核心报错原因 #

代码崩溃由两个明确错误引发：

• 对象键名拼写不匹配：初始化列存储对象columnWrappers时，使用的键名格式为column${i}（无末尾s），后续读取对应列数据时错误写为columns${i}（多了末尾s），读取到的columnPosts实际为undefined，对*undefined*调用forEach方法会直接触发类型错误，中断全部代码执行。
• DOM API使用错误：原生appendChild()方法单次仅接收1个节点参数，代码中postDiv.appendChild(image, overlay)只会插入image节点，overlay层不会被挂载，会导致后续标题层不显示的样式问题。
• 额外注意：备注中提到posts数组定义在CSS文件中属于表述错误，CSS是样式描述语言无法存储JS数组，需确认该数组定义在JS文件中，且在当前代码执行前已加载完成，否则会触发posts is not defined报错。

修复后可运行代码 #

const container = document.querySelector('.container');

function generateMasonryGrid(columns, posts){
   container.innerHTML = ''
   console.log(posts)
   // 按列存储对应帖子数据
   let columnWrappers = {};

   // 初始化列存储数组
   for(let i = 0; i < columns; i++){
       columnWrappers[`column${i}`] = []
   }
   
   // 将帖子按顺序分配到各列
   for(let i=0; i< posts.length; i++){
     const column = i % columns;
     columnWrappers[`column${column}`].push(posts[i])
   }
   
   // 逐列渲染DOM
   for(let i = 0; i < columns; i++ ){
       // 修正键名拼写，移除多余的s
       let columnPosts = columnWrappers[`column${i}`];
       let column = document.createElement('div');
       column.classList.add('column');

       columnPosts.forEach( post => {
               let postDiv = document.createElement('div');
               postDiv.classList.add('post');
               let image = document.createElement('img');
               image.src = post.image;
               let overlay = document.createElement('div');
               overlay.classList.add('overlay');
               let title = document.createElement('h3');
               title.innerText = post.title;

               overlay.appendChild(title);
               // 分两次调用appendChild，分别挂载图片和遮罩层
               postDiv.appendChild(image);
               postDiv.appendChild(overlay);
               column.appendChild(postDiv);
           }) 
           container.appendChild(column)
   }
}

// 确认posts数组已定义后执行渲染
generateMasonryGrid(4, posts) 

校验提示 #

• 确认.column类的CSS样式已设置正确的宽度、浮动/弹性布局属性，保证多列横向排列
• 确认图片资源路径可正常访问，避免出现图片加载失败的问题

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