如何在React的JSX中展示map函数处理的TMDB电影搜索结果？

你的问题核心在于没有把搜索结果存在组件的状态中，导致渲染页面时找不到要展示的变量。同时你写的searchMap只是在控制台打印数据，没有生成页面需要的JSX元素。下面是具体的修复步骤和完整代码：

修复步骤 #

• 用useState创建状态变量存储搜索结果，让数据变化时组件自动重新渲染
• 修改search函数，把API返回的结果存入状态，替代原本的打印逻辑
• 在页面展示区域直接遍历状态中的结果，生成对应的标题和海报元素

完整修复代码 #

import { useState } from 'react';

function App() {
  // 用状态存储搜索结果，初始值为空数组
  const [movieResults, setMovieResults] = useState([]);

  const search = async (event) => {
    const searchQuery = event.target.value;
    if (searchQuery) {
      try {
        const searchReq = await fetch(
          `https://api.themoviedb.org/3/search/movie?api_key=${process.env.API_KEY}&query=${searchQuery}`
        );
        const searchData = await searchReq.json();
        // 把结果存入状态，触发组件重新渲染
        setMovieResults(searchData.results);
      } catch (err) {
        console.error('搜索出错:', err);
      }
    } else {
      // 输入为空时清空结果
      setMovieResults([]);
    }
  };

  return (
    <div className="App">
      <div>
        <input type="text" onChange={search} placeholder="Search"></input>
      </div>

      <div>
        {/* 遍历状态中的电影结果，渲染标题和海报 */}
        {movieResults.map((movie) => (
          <div key={movie.id} style={{ margin: '10px 0' }}>
            <h3>{movie.title}</h3>
            {movie.backdrop_path ? (
              <img
                src={`https://image.tmdb.org/t/p/w500${movie.backdrop_path}`}
                alt={movie.title}
                style={{ width: '300px', height: 'auto' }}
              />
            ) : (
              <p>无海报</p>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

关键说明 #

• useState是React的状态钩子，用来管理组件内部的响应式数据，当movieResults变化时，页面会自动更新
• 用try/catch包裹API请求，处理可能的网络错误
• 遍历结果时必须加key属性（用电影的id），这是React列表渲染的硬性要求
• TMDB的海报需要拼接基础URL：https://image.tmdb.org/t/p/w500 + 接口返回的backdrop_path，同时处理海报为空的情况，避免页面报错

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