调用TMDB电影搜索API时出现‘parsed is undefined’错误求助

我尝试通过TMDB电影搜索API获取电影搜索结果，搜索参数searchInput来自表单组件。反复检查代码十余次，仍持续出现‘parsed is undefined’错误。相关代码如下：

function BrowseMovies() {

    let responseId = null

  const queryFunc = async (options) => {
    const response = await axios.request(options);
    responseId = response?.data?.results[0]?.id
    console.log(response.data.results)
    return response.data.results;
  };

  
  const onSubmit = (searchInput) => {
  let params = {
    query: searchInput.query,
    include_adult: searchInput.includeAdult.toString(),
    language: searchInput.language,
    primary_release_year: searchInput.year.toString(),
    page: '1',
    year: searchInput.year.toString(),
  };

  const options = {
    method: 'GET',
    url: 'https://api.themoviedb.org/3/search/movie',
    params: params,
    headers: {
      accept: 'application/json',
      Authorization: '-- Key --',
    },
  };
  queryFunc(options);
};

 const {data , isLoading , isError , error , refetch} = useQuery({
  queryKey : ['searchedMovie' , responseId],
  queryFn: queryFunc,
  enabled:false,
  refetchOnWindowFocus:false,
})
-- rendering Data --
}

问题根源分析 #

这个错误本质是React Query的配置逻辑错误，结合代码来看核心问题有三个：

1. queryFn参数不匹配：React Query会自动给queryFn传递查询上下文对象，而非你定义的API请求options，导致请求参数完全错误，引发解析失败。
2. 普通变量无法触发React状态更新：用let responseId = null存储ID，React无法追踪其变化，导致queryKey失效，查询缓存和状态逻辑混乱。
3. 手动调用queryFunc绕开React Query管理：直接调用queryFunc会让React Query的data、isLoading等状态无法同步更新，进一步加剧参数传递错误。

修复方案 #

1. 改用React状态管理关键变量

把普通变量换成useState，让React能追踪变化：

import { useState, useQuery } from 'react-query';
import axios from 'axios';

function BrowseMovies() {
  const [searchParams, setSearchParams] = useState(null);
  const [responseId, setResponseId] = useState(null);

2. 调整queryFunc适配React Query逻辑

让queryFunc从查询键中获取搜索参数，统一管理请求配置：

const queryFunc = async ({ queryKey }) => {
  const [_, params] = queryKey;
  // 处理可选参数的空值情况，避免toString()报错
  const requestParams = {
    query: params.query,
    include_adult: params.includeAdult.toString(),
    language: params.language,
    primary_release_year: params.year ? params.year.toString() : undefined,
    page: '1',
    year: params.year ? params.year.toString() : undefined,
  };

  const options = {
    method: 'GET',
    url: 'https://api.themoviedb.org/3/search/movie',
    params: requestParams,
    headers: {
      accept: 'application/json',
      Authorization: 'Bearer YOUR_ACTUAL_API_KEY', // 替换为你的有效API密钥
    },
  };

  const response = await axios.request(options);
  setResponseId(response?.data?.results[0]?.id);
  console.log(response.data.results);
  return response.data.results;
};

3. 修正useQuery和onSubmit逻辑

通过refetch触发查询，将搜索参数绑定到查询键：

const { data, isLoading, isError, error, refetch } = useQuery({
  queryKey: ['searchedMovie', searchParams],
  queryFn: queryFunc,
  enabled: false,
  refetchOnWindowFocus: false,
});

const onSubmit = (input) => {
  setSearchParams(input);
  refetch();
};

额外检查项 #

• 确认Authorization头格式正确，TMDB要求Bearer令牌格式：Bearer YOUR_API_KEY
• 查看浏览器网络请求，检查发送的参数是否符合TMDB API文档要求（比如include_adult应为"true"或"false"字符串）

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