javascript - 使用 React 定期运行 fetch

Question

我有一个包含不同 react 组件的网格，所有组件都是独立的 - 因为它们获取自己的数据并显示它。

我想以某种方式让它们每 15 分钟自动重新获取和更新一次。我的第一个想法是 HOC，但是随着更新的钩子(Hook)和功能组件的出现，我尝试了一些使用钩子(Hook)的东西。

所以我已经能够创建一个自定义 Hook - 来处理数据的获取:

const useFetching = (url) => {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState({});
  const [error, setError] = useState(null);
  const [reload, setReload] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);

        if (!response.ok) {
          throw new Error('Something went wrong');
        }

        const json = await response.json();

        if (json) {
          setData(json);
        }
      } catch (error) {
        setError(error);
      }

      setLoading(false);
    }

    fetchData();

  }, [url, reload]);

  return {
    loading,
    data,
    error
  };
};

然后两个组件使用这个:

const App1 = () => {
  const {loading, data, error} = useFetching(
    "https://hn.algolia.com/api/v1/search?query=redux"
  );

  if (loading || error) {
    return <p>{loading ? "Loading..." : error.message}</p>;
  }

  return (
    <ul>
      {data.hits.map(hit =>
        <li key={hit.objectID}>
          <a href={hit.url}>{hit.title}</a>
        </li>
      )}
    </ul>
  );
};


const App2 = () => {
  const {loading, data, error} = useFetching(
    "https://hn.algolia.com/api/v1/search?query=balls"
  );

  if (loading || error) {
    return <p>{loading ? "Loading..." : error.message}</p>;
  }

  return (
    <ul>
      {data.hits.map(hit =>
        <li key={hit.objectID}>
          <a href={hit.url}>{hit.title}</a>
        </li>
      )}
    </ul>
  );
};

ReactDOM.render(<><App1 /><App2/></>, document.getElementById('root'));

这工作正常 - 使用自定义 Hook 。所以我在想一些事情:

设置一个间隔计时器，每 15 分钟运行一次并更改“重新加载”状态标志 - 以触发重新获取和更新。还要确保在组件卸载时未设置间隔计时器。

为了访问状态和 setReload 方法 - 我将计时器放置在 useFetching 组件内 - 但这不起作用，因为它启动了多个计时器。我想我只有两个组件有 14 个计时器。

我真的不确定如何继续 - 我希望一个计时器只处理所有组件的刷新 - 同时我希望组件是独立的，不必与外部计时器共享任何内容。每个组件有一个计时器就可以了 - 只要在组件卸载时正确销毁它 - 并且如果将此机制内置到 useFetching Hook 中，那就太好了。

有没有更好的方法来构建这个 - 我没有想到？

非常感谢您的建议!

Answer 1

您需要一个 useInterval Hook 。这篇文章准确地解释了原因和方式:https://overreacted.io/making-setinterval-declarative-with-react-hooks/