Почему мой пользовательский хук вызывает бесконечное повторное получение данных? - PullRequest
Новая
       13

Почему мой пользовательский хук вызывает бесконечное повторное получение данных?

0 голосов
/ 16 апреля 2020

Мой компонент получает хеш-идентификатор из строки запроса, затем вызывает api с таким значением ha sh, чтобы получить сообщение для просмотра.

eslint заставляет меня добавить свой пользовательский хук в массив зависимостей. 

  fetchpost();
  }, [query]);

Но выполнение этого приводит к бесконечному l oop. Чтобы остановить его, мне нужно отключить это правило eslint, как показано ниже. 

// component file 
  const history = useHistory();
  const dispatch = useDispatch();
  const query = useQuery();
  const [post, setPost] = useState(null);
  const [hash, setHash] = useState(null);

  useEffect(() => {
    const fetchpost = async () => {
      const hash = query.get("hashed_id");
      const post = await fetchReviewPost(
        `/api/posts/${hash}/review`
      );
      setHash(hash);
      setPost(post);
    };

    fetchpost();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

// utils file 
import { useLocation } from "react-router-dom";

export const getCurrentURL = () => {
  return document.URL;
};

export const useQuery = () => {
  const queryString = useLocation().search;

  return new URLSearchParams(queryString);
};

Дан Абрамов пишет An infinite loop may also happen if you specify a value that always changes in the dependency array.

Так ли это здесь? Отличается ли ссылка query на каждом рендере? И почему eslint хочет поместить его в массив зависимостей?

Он также говорит removing a dependency you use (or blindly specifying []) is usually the wrong fix. Что я сделал, отключив правило eslint.

Есть мысли?

1 Ответ

1 голос
/ 16 апреля 2020

Если вы действительно хотите продолжать придерживаться предложений об отводе и использовать хук useQuery, вот альтернативный способ: 

  // component file 
  const history = useHistory();
  const dispatch = useDispatch();
  const q = useQuery();
  const [query] = useState(q);
  const [post, setPost] = useState(null);
  const [hash, setHash] = useState(null);

  useEffect(() => {
    const fetchpost = async () => {
      const hash = query.get("hashed_id");
      const post = await fetchReviewPost(
        `/api/posts/${hash}/review`
      );
      setHash(hash);
      setPost(post);
    };

    fetchpost();
  }, [query]);

На этом этапе значение query остается постоянным для последующей функции звонки.

Однако я бы удалил хук useQuery и поместил его содержимое прямо в функцию fetchpost.

...