javascript - React 以编程方式调用钩子(Hook)

Question

https://codesandbox.io/s/react-hooks-usefetch-cniul

请参阅上面的网址，了解我的代码的非常简化的版本。

我希望能够在一定时间间隔内使用我的钩子(Hook)从 API 重新获取数据(基本上是轮询端点以获取数据)。

我想要的是能够调用像 refetch 这样的东西(正如我在代码中作为注释显示的那样)，这本质上只是调用 fetchData再次并用相应的响应更新状态。

解决这个问题的最佳方法是什么？我能想到的唯一方法是在钩子(Hook)中添加一个 checker 变量，该变量是某种 uuid (Math.random() 也许)，返回 setChecker 为 refetch ，只需将 checker 添加到数组中作为第二个 useEffect 参数来控制重新渲染。因此，每当您调用 refetch 时，它都会调用 setChecker 来更新随机数 (checker)，然后函数再次运行。

显然这听起来很“hacky”，一定有更好的方法来做到这一点 - 有什么想法吗？

Answer 1

如果你想进行持续的轮询，我认为你可以将 setInterval() 移动到钩子(Hook)中，如下所示:

function useFetch() {
  const [data, setDataState] = useState(null);
  const [loading, setLoadingState] = useState(true);
  useEffect(() => {
    function fetchData() {
      setLoadingState(true);
      fetch(url)
        .then(j => j.json())
        .then(data => {
          setDataState(data);
          setLoadingState(false);
        });
    }

    const interval = setInterval(() => {
      fetchData();
    }, 5000);

    fetchData();

    return () => clearInterval(interval);
  }, []);

  return [
    {
      data,
      loading
    }
  ];
}

请记住包含return () =>clearInterval(interval);，以便正确清理钩子(Hook)。