React电影目录开发问题：TMDB API数据无法更新useState渲染电影卡片

云上老周

2026-8-7

解决React中TMDB API数据无法更新useState状态的问题

核心问题：API返回数据结构不匹配

你用data.Search来获取电影数组，但TMDB搜索电影API的返回结果数组字段是results，不是Search（Search是OMDB API的字段名）。这会导致setMovies(data.Search)将movies设置为undefined，数组长度始终为0，所以一直显示"No movies found"。

修复代码

将App组件中的setMovies(data.Search)修改为：

setMovies(data.results || []); // 加|| []兜底，避免API无结果时movies变成undefined

次要问题优化

searchMovies函数参数冗余与URL优化
函数定义接收title参数，但实际使用的是searchTerm状态，同时建议用模板字符串拼接URL，并添加encodeURIComponent处理特殊字符：

const searchMovies = async () => {
    const url = `${API_URL}&query=${encodeURIComponent(searchTerm)}`; 
    const response = await fetch(url);
    const data = await response.json();
    setMovies(data.results || []);
}

MovieCard字段适配TMDB返回结构
TMDB中poster_path不存在时返回null而非'N/A'，同时建议给字段加可选链避免报错：

const MovieCard = ({ movie }) => {
    return (
        <div className="movie">
            <div>
                <p>{movie?.release_date || 'Unknown date'}</p>
            </div>
            <div>
                <img
                    src={movie?.poster_path ? `https://image.tmdb.org/t/p/original${movie.poster_path}` : 'https://www.shortlist.com/media/imager/201905/22154-posts.article_lg.jpg'} 
                    alt={movie?.title || 'Movie poster'}
                />
            </div>
            <div>
                <span>{movie?.original_language || 'Unknown'}</span> 
                <h3>{movie?.title || 'Untitled'}</h3>
            </div>
        </div>
    )
}
export default MovieCard;