无法在回调中调用 React Hook“useInterval”
React Hook “useInterval” cannot be called inside a callback
我正在尝试为可能需要一段时间才能完成的后端操作设置进度条。
- 用户点击按钮导出文件
- API 响应具有后端进程的令牌
- 使用 useInterval，我每半秒检查一次进度 %（使用另一个端点，发送令牌）以更新我的进度条组件
我简化了 Codesandbox 中的代码以重现该问题，在我的 Codesandbox 中，单击按钮时，我 运行 使用 Interval 每 4 秒获取一张新的随机猫图片并更新我的钩子。
据我了解，问题是因为我在自定义 Hook (useInterval) 中调用 Hook，但我不知道另一种方法来执行此操作，因为本机 setInterval 不适用于 Hooks。
我使用了使用间隔包
您不必将 useInterval 换成 useEffect。 Internally useInterval 调用 useEffect 来完成它。
并且您可以在组件中更改传递给 useInterval 的值，新值将被正确应用。您可以更改延迟或回调参数，useInterval 将应用它们。
为了展示，我添加了停止按钮，停止检索猫。
这里是 working solution 和猫 :-)
我正在尝试为可能需要一段时间才能完成的后端操作设置进度条。
- 用户点击按钮导出文件
- API 响应具有后端进程的令牌
- 使用 useInterval，我每半秒检查一次进度 %（使用另一个端点，发送令牌）以更新我的进度条组件
我简化了 Codesandbox 中的代码以重现该问题，在我的 Codesandbox 中，单击按钮时，我 运行 使用 Interval 每 4 秒获取一张新的随机猫图片并更新我的钩子。
据我了解，问题是因为我在自定义 Hook (useInterval) 中调用 Hook，但我不知道另一种方法来执行此操作，因为本机 setInterval 不适用于 Hooks。
我使用了使用间隔包
您不必将 useInterval 换成 useEffect。 Internally useInterval 调用 useEffect 来完成它。
并且您可以在组件中更改传递给 useInterval 的值，新值将被正确应用。您可以更改延迟或回调参数，useInterval 将应用它们。
为了展示，我添加了停止按钮，停止检索猫。
这里是 working solution 和猫 :-)