根据输入值过滤数据时遇forEach报错及[object Object]问题求助

核心错误1：beersArray被转成了字符串 #

你在map之后调用了.join("")，这会把map返回的对象数组直接转换成字符串——因为数组里的每个对象会被默认转为[object Object]，拼接后beersArray就变成了一串[object Object][object Object]...的字符串，而不是数组。字符串没有forEach方法，所以报错；用Array.from()处理字符串时，会把每个字符拆成数组元素，自然不符合预期。

核心错误2：缺少DOM元素引用，且判断逻辑错误 #

就算去掉.join("")，你返回的对象只有name属性，没有对应的DOM元素引用，后续beer.element会报错；另外beer.includes(value)也不对，对象没有includes方法，应该检查beer.name是否包含输入值。

修正后的代码 #

1. 修改displayAllBeers函数

不再用字符串拼接累加innerHTML，而是创建真实DOM元素并保存引用：

let beersArray = [];

function displayAllBeers(data) {
  // 先清空容器，避免重复渲染
  beersContainer.innerHTML = '';
  
  beersArray = data.map((beer) => {
    // 创建单个啤酒容器元素
    const beerContainer = document.createElement('div');
    beerContainer.className = 'beerContainer';
    // 填充内容
    beerContainer.innerHTML = `
      <h3 class='name'>${beer.name}</h3>
      <img src='${beer.image_url}' alt='${beer.name}'>
      <p>${beer.description}</p>
      <button class="addFavBtn">Favourite</button>
    `;
    // 添加到页面容器
    beersContainer.appendChild(beerContainer);
    // 返回包含名称和DOM元素的对象
    return { name: beer.name, element: beerContainer };
  });
}

2. 修改搜索事件监听

修正判断逻辑，同时忽略大小写让搜索更友好：

searchInput.addEventListener("input", (e) => {
  const value = e.target.value.trim().toLowerCase();
  beersArray.forEach((beer) => {
    // 检查啤酒名称是否包含输入值（忽略大小写）
    const isVisible = beer.name.toLowerCase().includes(value);
    // 切换隐藏类
    beer.element.classList.toggle("hide", !isVisible);
  });
});

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