在 useEffect 挂钩中调用 API 在道具更新时无法正常工作

Question

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

这看起来像是对自定义 React 挂钩的正确使用吗？
有没有更好的方法根据传入的 prop 在不同的 API 端点之间切换？我想做类似的事情：

<MovieGrid typeOfMovies={"popular"} />

and

<MovieGrid typeOfMovies={"upcoming"} />

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

我提供的代码确实有效。但是由于 hooks 是一个相对较新的东西，所以我对自己是否正确使用它们并不完全有信心。

这是我得到的：


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]);

在 useEffect 挂钩中调用 API 在道具更新时无法正常工作

Calling API in useEffect hook doesn't work correctly on prop update

javascript

reactjs

react-hooks