如何在没有useEffect或setState函数的情况下重新触发钩子

Question

我正在使用一个自定义钩子，它将URL作为参数并返回获取数据及其加载状态。因此，与大多数钩子不同，我没有在需要时设置新状态的功能，这在项目的这一点上会导致各种问题，因为我碰巧需要一种方法来重新触发该自定义钩子每次收到新的 props 值。

问题是，正如预期的那样，组件的状态是在组件首次渲染时设置的，但是当它收到新的道具时，它不会重新渲染/重新触发。

自定义钩子的样子如下：

//useFetch.js
import { useState, useEffect } from "react";
function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  async function fetchUrl() {
    const response = await fetch(url);
    const json = await response.json();
    setData(JSON.parse(JSON.stringify(json)));
    setLoading(false);
  }
  useEffect(() => {
    fetchUrl();
  }, []);
  return [data, loading];
}
export { useFetch };

这就是我使用这个钩子的方式：

//repos.js
import React from "react";
import { useFetch }  from "./fetchHook";

function Repos(props) {
  const [userRepos, reposLoading] = useFetch(`https://api.github.com/users/${props.users[props.count].login}/repos`);
  return reposLoading ? (
    <div className="App">
      stuff to render if it's still loading
    </div>
  ) : (
    <div
     stuff to render if it's loaded
    </div>
  );
}

Answer 1

将url添加到 useFetch hook 的依赖项数组中，这将确保当url prop更改时效果将重新运行

useEffect(() => {
  console.log("refetching url", url);
  fetchUrl();
}, [url]);