无法在回调内部调用React Hook“ useInterval”

Question

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

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

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

Codesandbox

据我了解，问题是因为我在自定义的Hook（useInterval）中调用了Hook，但我不知道另一种方法，因为本机setInterval无法与Hook一起使用。

我使用了 use-interval 包

Answer 1

您不必用LinkedList<T> table[size]; 包装useInterval。 Internally useEffect调用useInterval使其正常工作。

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

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

working solution和猫：-）