在使用效果钩子中调用 API 在道具更新时无法正常工作

Question

我正在寻找有关此客户 React 钩子的反馈。我想知道：

1. 这看起来像是自定义 React 钩子的正确使用吗？
2. 有没有更好的方法可以根据传入的道具在不同的 API 端点之间切换？我想做这样的事情：

<MovieGrid typeOfMovies={"popular"} />
and
<MovieGrid typeOfMovies={"upcoming"} />

3. 您对看到的任何内容有任何反馈或建议吗？谢谢！

我提供的代码确实有效。但是由于钩子相对较新，我并不完全有信心我是否正确使用它们。

这是我得到的：

import React, { useState, useEffect } from "react";
function useFetchMovies(typeOfMovies) {
  const [movieData, setMovieData] = useState([]);

  const movieEndpointURL = () => {
    if (typeOfMovies === "upcoming") {
      return `https://api.themoviedb.org/3/movie/upcoming?api_key={API_KEY}&language=en-US&page=1&region=US`;
    } else if (typeOfMovies === "popular") {
      return `https://api.themoviedb.org/3/movie/popular?api_key={API_KEY}&language=en-US&page=1&region=US`;
    }
  };
  const fetchMovieData = async () => {
    try {
      const res = await fetch(movieEndpointURL());
      const movies = await res.json();
      setMovieData(movies.results);
      console.log(movies.results);
    } catch (err) {
      console.log(err);
    }
  };
  useEffect(() => {
    fetchMovieData();
  }, []);
  return [movieData, setMovieData];
}
export { useFetchMovies };

Answer 1

您的useFetchMovies似乎是正确的，期望当typeOfMovies更改时不会获取新数据的部分，因为当 useEffect 首次在组件挂载上运行时，它将引用最初创建fetchMoviesData及其闭包，当再次调用useFetchMovies钩子时，将创建一个未被useEffect引用的新函数。

为了使它正确单词，您应该将typeOfMovies作为第二个参数传递给useEffect

useEffect(() => {
    fetchMovieData();
}, [typeOfMovies]);