Вызов API в хуке useEffect не работает правильно при обновлении проп - PullRequest
Новая
       3

Вызов API в хуке useEffect не работает правильно при обновлении проп

1 голос
/ 29 марта 2019

Я ищу отзывы об этом клиенте React hook.Мне интересно:

  1. Похоже ли это на правильное использование пользовательских крючков React?
  2. Есть ли лучший способ переключения между различными конечными точками 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 };

1 Ответ

1 голос
/ 29 марта 2019

Ваш useFetchMovies кажется правильным, ожидайте, что при изменении typeOfMovies новые данные не будут выбраны, поскольку при первом запуске useEffect при монтировании компонента он будет ссылаться на fetchMoviesData, который был изначально создан вместе сего закрытие и когда снова вызывается хук useFetchMovies, создается новая функция, на которую не ссылается useEffect.

Чтобы правильно составить слово, вы должны передать typeOfMovies в качестве второго аргумента useEffect вроде 

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