Вызов API в процессе использования Перехватчик эффекта работает некорректно при обновлении опоры

Я ищу отзывы об этом клиентском крючке React. Я задаюсь вопросом:

  1. Похоже ли это на правильное использование кастомных хуков React?
  2. Есть ли лучший способ переключаться между разными конечными точками API на основе переданной опоры? Я хочу сделать что-то вроде:
<MovieGrid typeOfMovies={"popular"} />

and

<MovieGrid typeOfMovies={"upcoming"} />
  1. Есть ли у вас какие-либо отзывы или рекомендации по поводу того, что вы видите? Спасибо!

Приведенный мной код действительно работает. Но поскольку крючки относительно новые, я не уверен, что использую их правильно.

Вот что у меня есть:


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 };

reactjs javascript react-hooks
person Macintosh007    schedule 29.03.2019    source источник
comment
Действительно ли это fetchMovieData при typeOfMovies изменении? Мне кажется, что текущее использование useEffect будет извлекаться после первого рендеринга (например, старый componentDidMount), а не при изменениях свойств позже.   -  person Jokester    schedule 29.03.2019
comment
@ Шутник, знаешь что, ты совершенно прав. Он не обновляется. Хмммм.   -  person Macintosh007    schedule 29.03.2019
comment
Я рекомендую эту статью, чтобы понять новые API-интерфейсы ловушек (и идеи, лежащие в основе их) :)   -  person Jokester    schedule 29.03.2019
comment
включение [typeOfMovies] в useEffect должно заставить его работать при изменении свойства   -  person Rahil Ahmad    schedule 29.03.2019
comment
@jokester большое спасибо за рекомендованную статью. Я только что дочитал статью! Это было долгое чтение, но НАСТОЛЬКО полезно.   -  person Macintosh007    schedule 29.03.2019

Ответы (1)


arrow_upward
1
arrow_downward

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

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

useEffect(() => {
    fetchMovieData();
}, [typeOfMovies]);
person Shubham Khatri    schedule 29.03.2019
comment
Это сработало! Большое спасибо за отзыв и доброту. Все начинает обретать смысл. - person Macintosh007; 29.03.2019
comment
Считаете ли вы, что использование операторов IF для переключения между конечными точками API нормально? Или предпочтительнее использовать оператор switch или что-то еще? - person Macintosh007; 29.03.2019
comment
вам на самом деле не нужно, если бы вы могли просто сделать это с помощью динамической оценки, например `https://api.themoviedb.org/3/movie/${typeOfMovies}?api_key={API_KEY}&language=en-US&page=1&region=US`; - person Shubham Khatri; 29.03.2019