使用async函数调用OMDbAPI渲染电影数据时遇undefined问题求助

问题说明 #

尝试通过OMDbAPI异步获取电影数据，想用map()方法将数据渲染到页面，使用Object.keys()处理data.Search后页面持续出现undefined报错，目标是将数据转为新数组后通过movieHTML()函数在HTML中展示。

错误原因 #

1. data.Search本身就是数组，无需Object.keys()处理：Object.keys()会提取数组的索引（如"0"、"1"这类字符串），而非电影对象。你在map()里传入的movie是索引字符串，不是包含电影详情的对象，导致movieHTML()中访问details.Poster、details.Title等属性时全部返回undefined。
2. map()中误用console.log()：console.log()没有返回值，会导致map()生成的数组全是undefined，最终join("")后无法渲染有效内容。

修正后的代码 #

JavaScript代码

const movieListEl = document.querySelector('.shows');

async function main(event) {
  const url = `https://www.omdbapi.com/?apikey=39a36280&s=${encodeURI(event)}`;
  const search = await fetch(url);
  const data = await search.json();

  // 先判断请求是否成功，避免data.Search不存在的情况
  if (data.Response === 'True') {
    // 直接使用data.Search数组，不需要Object.keys()
    movieListEl.innerHTML = data.Search.map(movie => movieHTML(movie)).join("");
  } else {
    // 请求失败时展示提示
    movieListEl.innerHTML = '<p>未找到相关电影</p>';
  }
}

main('squid game');

function movieHTML(details) {
  return `<div class="shows__content">
<figure class="shows__poster">
    <img src="${details.Poster}" alt="${details.Title}海报" class="poster">
</figure>
   <div class="poster__description">
    <h4 class="poster__title">${details.Title}</h4>
    <p class="poster__year">${details.Year}</p>
</div>
</div>
 `;
}

HTML代码

<div class="shows">
</div>

关键修改点 #

• 移除Object.keys(data.Search)，直接遍历data.Search数组，每个元素都是完整的电影对象。
• 去掉map()中的console.log()，直接返回movieHTML(movie)的结果，确保map()生成由HTML字符串组成的数组。
• 增加请求成功判断，当data.Response !== 'True'时展示提示，避免因无搜索结果导致的报错。

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