javascript - 单击按钮时如何使用自定义 useFetch Hook ？

Question

React 的半新内容。我有一个 useFetch Hook ，它具有所有的获取功能，我想在用户单击“加载更多项目”按钮时调用它来获取下一页的项目。

显然，

<button onClick={() => { useFetch(...) }}>load more items<button>不起作用，因为我在回调中调用自定义 Hook 。一般来说，做这种事情的最佳模式是什么？我可以在功能组件本身中调用 useFetch，但是当组件安装时会发生 fetch，这并不是我真正想要的。

我读过的所有内容都指出了获取钩子(Hook)的有用性，但这只是让工作变得更加困难，特别是当我必须频繁且动态地获取小块时。

编辑:我可能已经弄清楚了，如果有效，我会再次发布答案，但这篇文章没有收到答案

Answer 1

正如您自己所注意到的，您不应该从事件处理程序中调用 Hook 。

您的 useFetch() Hook 通常不应该获取任何数据，而是返回一个您可以稍后调用来获取数据的函数。

您的组件将如下所示:

const MyComponent = () => {
  const { fetch, data } = useFetch();
  return (<div>
      <p>{data}</p>
      <button onClick={() => fetch()}>Load more items</button>
    </div>);
}

您的 useFetch 钩子(Hook)负责

• 创建 fetch 函数。
• 在调用并解析 fetch 后返回data。
• 保持 data 状态，并在再次调用 fetch 时更新 data。

这是 useFetch Hook 的样子

function useFetch() {
  const [data, setData] = useState();
  const fetch = async () => {
    const result = await // call to your API, or whereever you get data from
    setData(result.data);
  };

  return { fetch, data };
}