Question

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

这看起来像是对自定义React钩子的正确使用吗？
是否有更好的方法可以根据传入的prop在不同的API端点之间进行切换？我正在寻找类似的东西：

<MovieGrid typeOfMovies={"popular"} />

and

<MovieGrid typeOfMovies={"upcoming"} />

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

我提供的代码确实有效。但是由于钩子是一个相对较新的钩子，所以我不完全有把握使用它们。

这就是我所拥有的：


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在道具更新时无法正常工作

1 个答案: