Крюк не рендерит компонент

Question

Я использую React с React-Router-Dom, и я не знаю, почему мой дочерний компонент (функциональный компонент) не выполняет повторную визуализацию при изменении URL-адреса.И я не знаю, почему при первом посещении динамической страницы console.log(url) срабатывает 3 раза?

Мой дочерний компонент:

import React from "react";
import { useFetch } from "./hooks";

function Page(props) {
  const url = "https://jsonplaceholder.typicode.com/posts" + props.match.url;
  console.log(url);

  const [data, loading] = useFetch(url);

  return (
    <>
      {loading ? (
        "Loading..."
      ) : (
        <>
          <h1>{data.title}</h1>
          <p>{data.body}</p>
        </>
      )}
    </>
  );
}
export default Page;

Доступна песочницаздесь для более полного примера: https://codesandbox.io/embed/great-mahavira-5ktrk

Answer 1

Ваш дочерний компонент выполняет рендеринг повторно, но он использует старые данные из предыдущего рендеринга. Это происходит потому, что вы не передаете url как зависимость в useEffect hook. И лучше будет переместить функцию fetchUrl внутрь useEffect (если вы не хотите использовать ее в других местах), потому что теперь eslint выдает ошибку:

В React Hook useEffect отсутствует зависимость: 'fetchUrl'. Либо включите его, либо удалите массив зависимостей. (Реагирует-крючки / исчерпывающий DEPS)

Вот как это должно выглядеть:

function useFetch(url) {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchUrl() {
      const response = await fetch(url);
      const json = await response.json();
      setData(json);
      setLoading(false);
    }

    fetchUrl();
  }, [url]);
  return [data, loading];
}

«И я не знаю, почему, когда я впервые захожу на динамическую страницу, console.log (url) сработал 3 раза?»

Это происходит потому, что ваш компонент перерисовывается 3 раза:

1. Когда он монтируется.

2. Когда ваш хук звонит setData(json).

3. Когда ваш хук звонит setLoading(false).

Вот рабочий пример: https://codesandbox.io/embed/condescending-wildflower-v8m4c