基于The Movie Database API的React应用搜索路由及数据报错求助

这个错误的核心是你在尝试访问一个undefined值的results属性——要么是API请求还未返回数据就开始渲染，要么是请求返回的数据格式不符合预期（比如请求失败、参数错误）。结合你的场景，给你几个具体修复步骤：

1. 添加状态管理与空值检查，避免数据未就绪时渲染 #

在Searchfield2组件里，先对请求状态做管理，确保在数据就绪后再访问results：

import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';

function Searchfield2() {
  const { keyword } = useParams();
  const [movies, setMovies] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchMovies = async () => {
      try {
        // 先处理空关键词的情况
        if (!keyword?.trim()) {
          setMovies([]);
          return;
        }
        
        const response = await fetch(`https://api.themoviedb.org/3/search/movie?api_key=你的密钥&query=${encodeURIComponent(keyword)}`);
        // 检查请求是否成功
        if (!response.ok) throw new Error('请求失败，状态码：' + response.status);
        
        const data = await response.json();
        // 给results加兜底，确保即使返回无数据也不会出现undefined
        setMovies(data.results || []);
      } catch (err) {
        setError(err.message);
        setMovies([]);
      } finally {
        setLoading(false);
      }
    };

    fetchMovies();
  }, [keyword]);

  // 根据不同状态渲染对应内容
  if (loading) return <div>加载中...</div>;
  if (error) return <div>搜索出错：{error}</div>;

  // 安全渲染电影列表
  return (
    <div className="search-results">
      {movies.length === 0 ? (
        <p>没有找到相关电影</p>
      ) : (
        movies.map(movie => (
          <div key={movie.id} className="movie-card">
            <h3>{movie.title}</h3>
            {/* 其他电影信息渲染逻辑 */}
          </div>
        ))
      )}
写 matching
中，燃烧室互动 Minusonda比较
真人[ % ]
    </div>
  );
}

export default Searchfield2;

2. 确认路由参数获取正确 #

你配置了/searchresults/:keyword路由，要确保参数获取逻辑正确：

• 如果你用的是react-router-dom v6，必须用useParams()获取参数；如果是v5及以下版本，需要通过props.match.params.keyword获取
• 确保路由配置里的参数名称是keyword，和组件中获取的名称完全一致

3. 调试API返回数据 #

在fetchMovies函数里加入console.log(data)，查看TMDB API的实际返回内容：

• 如果请求失败（比如密钥无效、参数错误），API会返回带status_message的错误对象，而非带有results的结构，需要在代码里处理这种情况
• 如果关键词为空，API可能返回非预期结果，提前判断空关键词可以避免无效请求

最后提醒：上线前一定要把API密钥移到环境变量中，不要直接写在代码里，防止密钥泄露被滥用。

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