小编luk*_*eau的帖子

遵守react-hooks/exhaustive-deps会导致无限循环和/或大量useCallback()

我的应用程序有一个userService公开useUserService带有 API 函数(例如getUsergetUsers等)的钩子。我为此使用钩子是因为 API 调用需要来自我的会话状态的信息,该信息由 React Context Provider 提供。

getUsers向调用提供函数useEffect会使react-hooks/exhaustive-depseslint 规则不满意,因为它希望将getUsers函数列为 dep - 但是,将其列为 dep 会导致效果在无限循环中运行,因为每次重新渲染组件时,它都会重新运行useUserService钩子,从而重新创建该getUsers函数。

这可以通过将函数包装在 中来解决useCallback,但随后useCallback依赖项数组会遇到类似的 lint 规则。我想我一定是在这里做错了什么,因为我无法想象我应该将这些函数中的每一个都包装在useCallback().

我已经在 Codesandbox 中重新创建了该问题。

1:遇到eslint警告:https://codesandbox.io/s/usecallback-lint-part-1-76bcf ?file=/src/useFetch.ts

2:eslint通过撒入补救警告useCallback,导致另一个eslint警告: https: //codesandbox.io/s/usecallback-lint-part-2-uwhhf ?file=/src/App.js

3:通过更深入地补救该规则: https://codesandbox.io/s/usecallback-lint-part-3-6wfwj ?file=/src/apiService.tseslint

如果我忽略 lint 警告,一切都会正常工作......但我应该吗?

reactjs react-hooks

7
推荐指数
1
解决办法
2410
查看次数

标签 统计

react-hooks ×1

reactjs ×1