Javascript 如何在钩子中调用钩子？（或无法完成的备选方案：D）

因此，我创建了一个需要在页面视图中触发的自定义钩子

所以我想我可以在

useffect

中调用这个钩子，但看起来这是不可能的

有人知道我怎么做吗

一旦我启动它，它就会触发Google Analytics，所以它必须是在线的。这可能吗

好的，这里有一个例子

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.
},[])

}

---

钩子规则声明只从函数的顶层调用钩子

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

您不能将自定义挂钩组合到

useffect

调用中，因为根据定义，这是一个“嵌套函数”。相反，您应该构建自定义钩子，以包含它们需要在自定义钩子内部执行的所有钩子或

useffect

调用（但在自定义钩子的顶层）

---

有更具体的代码来说明你到底想做什么会有帮助，因为目前你的问题太模糊，无法给出更直接的答案。

这里不需要

useffect

export const usePageView=props=>{
const counter=useSelector（state=>state）//来自react redux的useSelector
console.log（计数器“==”）
}

从“../myhooks”导入{usePageView}
导出常量myComponent=（）=>{
usePageView（）；
}

---

这应该行。

在问题中添加一个选项，我们只能调试我们看到的内容。@ChrisG有帮助吗？添加了一些代码你的钩子没有返回任何东西。钩子基本上是这样工作的：

const counter=usePageView（）

在功能组件的开头，然后是更多基于

计数器的代码。其思想是，如果钩子返回的值发生变化（因为钩子的内部状态发生变化），那么使用该值的组件也会发生变化，因为它被重新呈现。如果您的实际目标是在功能组件中实现
componentDidMount（）
，那么您首先不需要钩子。下面是一个简单的自定义钩子示例：@ChrisG可能只是一个常规函数？我只想触发一个页面视图onload。我有一个GTM助手库，因此将在我的钩子中调用它。我不想在myComponent中直接调用GTM，因为它不可伸缩或不可重用。所以我想要一个钩子来做这个。我不想使用HOC，因为它们很难看。但也许我不需要钩子。只是一个常规函数？是的，这很完美，我想：每次组件重新渲染时，它都会调用该函数。我认为这不是你想要的。
usePageView
只是
useSelector
的包装，每次渲染都必须调用挂钩。