在 useEffect 挂钩中调用 API 在道具更新时无法正常工作 [重复]答案

【问题标题】：Calling API in useEffect hook doesn't work correctly on prop update [duplicate]在 useEffect 挂钩中调用 API 在道具更新时无法正常工作 [重复]
【发布时间】：2019-08-19 22:02:29
【问题描述】：

我正在寻找有关此客户 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 };

【问题讨论】：

当typeOfMovies 改变时，这实际上是fetchMovieData 吗？在我看来，useEffect 的当前使用将在第一次渲染后获取（如旧的componentDidMount），而不是稍后的道具更改。
@Jokester，你知道吗，你是完全正确的。它不更新。嗯。
我推荐 this article 了解新的钩子 API（以及它们背后的想法）:)
在 useEffect 中包含 [typeOfMovies] 应该使其在道具更改时起作用
@jokester 非常感谢您推荐的文章。我刚看完文章！读得很长，但很有帮助。

标签： javascript reactjs react-hooks

【解决方案1】：

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

为了使其正确使用，您应该将typeOfMovies 作为第二个参数传递给useEffect，就像

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

【讨论】：

成功了！非常感谢您的反馈和善意。这一切都开始变得有意义了。
您认为使用 IF 语句在 API 端点之间切换是否合适？还是首选 switch 语句或其他东西？
你实际上并不需要 if 语句你可以简单地使用动态评估来完成它，比如`https://api.themoviedb.org/3/movie/${typeOfMovies}?api_key={API_KEY}&language=en-US&page=1&region=US`;