辅助函数中无效的钩子调用反应

Question

无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一：

1. 您的 React 和渲染器版本可能不匹配（例如 React DOM）
2. 你可能违反了 Hooks 规则
3. 您可能在同一个应用程序中拥有多个 React 副本

我的代码：

ApiHelper.js

export function LoadAuthData () { ... const [t] = useAtom();  ... }

应用程序.js

LoadAuthData();

AnotherItem.js

LoadAuthData();

有什么更好的解决方案可以让每个组件都可以访问 LoadAuthData 函数？谢谢你

传递参数没有帮助，因为我需要传递一个函数

Answer 1

您似乎正在尝试在 React 组件之外使用钩子，但这不起作用。相反，您应该将

LoadAuthData

转换为自定义挂钩。自定义挂钩以“use”开头，例如

useLoadAuthData

。然后，您可以直接在函数组件中调用此钩子（

App.js

，

AnotherItem.js

），确保该钩子遵循钩子规则。如果

useAtom

在全局范围内必不可少，请考虑使用 React Context 跨组件提供它。这样，每个需要它的组件都可以访问上下文，遵守 React 的准则并保持代码干净。