无法在回调中调用 React Hook “useInterval”

Question

我正在尝试为可能需要一段时间才能完成的后端操作设置进度条。

1. 用户单击按钮导出文件
2. API 响应具有后端进程的令牌
3. 使用 useInterval，我每半秒检查一次进度 %（使用另一个端点，发送令牌）以更新我的进度条组件

我简化了 Codesandbox 中的代码来重现问题，在我的 Codesandbox 中，当单击按钮时，我运行 useInterval 每 4 秒获取一个新的随机猫图片并更新我的钩子。

代码沙盒

据我了解，问题是因为我在自定义 Hook (useInterval) 中调用了一个 Hook，但我不知道另一种方法来执行此操作，因为本机 setInterval 不适用于 Hook。

我使用了use-interval包

Answer 1

你不必useInterval用useEffect. 内部 useInterval调用useEffect以使其工作。

您可以更改传递到useInterval组件中的值，新值将被正确应用。您可以更改延迟或回调参数并useInterval应用它们。

为了展示，我添加了停止按钮，停止检索猫。

这是猫的工作解决方案:-)