React.js调用TMDB电影库：搜索结果需重编译才显示的解决问询

你的组件仅在首次挂载时调用了一次API（因为useEffect的依赖数组是空的[]），后续输入搜索内容改变searchQuery时，没有触发新的API请求，所以页面不会实时更新。只有重新编译时组件重新挂载，才会执行useEffect调用API。

1. 让API请求随searchQuery变化触发 #

修改useEffect的依赖数组，加入searchQuery，这样每次搜索关键词变化时，自动调用API获取新结果。同时把接口地址的构建移到getMovie内部，避免闭包导致的旧值问题。

2. 完善"Show All"按钮功能 #

给按钮添加点击事件，清空搜索关键词，回到默认的电影列表。

3. 可选：添加防抖优化（避免频繁API请求） #

每次输入后延迟一段时间再调用API，减少不必要的请求次数，提升性能。

import React, { useState, useEffect } from "react";

function Movie() {
    const [movieList, setMovieList] = useState([]);
    const [searchQuery, setSearchQuery] = useState("");
    const API_KEY = "10940971fec2e5fb49d3d2e4797d9da5";

    const getMovie = () => {  
        // 每次调用时根据最新的searchQuery生成接口地址
        const endpoints = searchQuery 
            ? `https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&query=${searchQuery}`
            : `https://api.themoviedb.org/3/discover/movie?api_key=${API_KEY}`;

        const options = {
            method: 'GET',
            headers: {
                accept: 'application/json',
                Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIxMDk0MDk3MWZlYzJlNWZiNDlkM2QyZTQ3OTdkOWRhNSIsInN1YiI6IjY1NjU2MDE0MTU2Y2M3MDEwY2IzMTUxMSIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.S8rXI1em-12sf3qRFhWknWLPRSVxOJnGnyFjK6XsdLI'
            }
        };

        fetch(endpoints, options)
            .then(response => response.json())
            .then(response => setMovieList(response.results))
            .catch(err => console.error(err))
    }

    // 监听searchQuery变化，触发API请求，加入防抖
    useEffect(() => {
        const timer = setTimeout(() => {
            getMovie();
        }, 300);

        // 清理函数：若300ms内再次输入，清除上一次的定时器
        return () => clearTimeout(timer);
    }, [searchQuery])

    return (
        <div>
            <div className="searchBar">
                <input 
                    type="text" 
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    placeholder="Search movies..."
                />
                <button onClick={() => setSearchQuery("")}>Show All</button>
            </div>
            <div className="movie-list">
                {movieList.map((movie) => (
                    <div key={movie.id} className="movie-item">
                        <img 
                            src={`https://image.tmdb.org/t/p/w500/${movie.poster_path}`} 
                            alt={movie.original_title}
                        />
                        <h3>{movie.original_title}</h3>
                        <p>{movie.overview}</p>
                        <p>Release Date: {movie.release_date}</p>
                    </div>
                ))}
            </div>
        </div>
    )
}

export default Movie

• useEffect依赖数组：加入searchQuery，确保关键词变化时自动重新请求API。
• 防抖处理：用setTimeout和清理函数实现防抖，避免每次输入字符都发起请求。
• 接口地址内部构建：每次调用getMovie时生成最新的接口地址，避免闭包导致的旧searchQuery值问题。
• 添加key属性：给列表元素添加唯一key（用movie.id），符合React列表渲染规范。
• "Show All"按钮功能：点击清空searchQuery，自动触发默认电影列表的请求。

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