时间戳

首页 > 解决方案 > 如何在钩子中调用钩子？（或替代方案，因为这不能完成：D）

javascript - 如何在钩子中调用钩子？（或替代方案，因为这不能完成：D）

问题描述

所以我创建了一个需要在页面视图上触发的自定义钩子

所以我想我可以在里面调用这个钩子，useEffect但看起来这不可能

那么有人知道我该怎么做吗？

一旦我触发它，它将触发谷歌分析，因此它必须处于加载状态。这可能吗？

好的，这是一个例子

export const usePageView = props => {
    const counter = useSelector(state => state) // useSelector coming from react redux
    console.log(counter, '===')
}

import { usePageView } from '../myhooks'

export const myComponent = () => {
   useEffect(() => {
      usePageView() // get error saying Error: Invalid hook call.
},[])

}

标签： javascriptreactjsreact-hooks

解决方案

钩子规则规定只从函数的顶层调用钩子。

不要在循环、条件或嵌套函数中调用 Hook。相反，请始终在 React 函数的顶层使用 Hooks。通过遵循此规则，您可以确保每次组件呈现时都以相同的顺序调用 Hook。这就是允许 React 在多个 useState 和 useEffect 调用之间正确保留 Hooks 状态的原因。

您不能将自定义挂钩组合到useEffect调用中，因为根据定义，这是一个“嵌套函数”。相反，您应该构建您的自定义钩子以包含useEffect它们需要在自定义钩子内执行的所有钩子或调用（但在自定义钩子的顶层）。

https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

拥有更具体的代码来说明您正在尝试做什么会很有帮助，因为目前您的问题太模糊而无法给出更直接的答案。

推荐阅读