每次我尝试从 TMDB API 获取数据来搜索电影时，都会收到“解析未定义”错误

Question

我正在尝试从 TMDB API (https://developer.themoviedb.org/reference/search-movie) 获取响应以搜索电影查询。我观察了我的代码超过 10 次，但得到了同样的错误 :: parsed is undefined

我从表单组件获取 searchInput。

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 --
}

Answer 1

1. 请勿变异

   responseId

2. 您将

   responseId

   放在 queryKey

   ['searchedMovie' , responseId]

   中，这意味着它将作为参数传递给 queryFn，这是错误的

你应该这样做：

您的获取 API：

const queryFunc = async (options) => {
    const response = await axios.request(options);
    return response.data.results;
};

您的 onSubmit 是为了获取选项，因此将其重命名为

getOptions

:

const getOptions = (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 --',
    },
  };
  return options
};

这就是构建

useQuery

的方式：

const {data , isLoading , isError , error , refetch} = useQuery({
  queryKey : ['searchedMovie'], // for simplicity, but you should choose some other unique keys, could be a  combination of multiple searchInput properties
  queryFn: () => queryFunc(getOptions(searchInput)),
  enabled:false,
  refetchOnWindowFocus:false,
})

然后你可以调用refetch，以便当用户点击提交按钮时

react-query

开始获取数据：

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