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

【问题标题】：How to call a hook inside a hook? (or alternative as this cant be done :D)如何在钩子中调用钩子？（或替代方案，因为这不能完成：D）
【发布时间】：2020-03-12 08:31:21
【问题描述】：

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

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

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

一旦我触发它，它就会触发 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.
},[])

}

【问题讨论】：

问题加minimal reproducible example，只能调试能看到的。
@ChrisG 有帮助吗？添加了一些代码
你的钩子没有返回任何东西。钩子基本上是这样工作的：const counter = usePageView(); 在功能组件的开头，然后是更多基于counter 的代码。这个想法是，如果钩子返回的值发生变化（因为钩子的内部状态发生变化），那么使用该值的组件也会发生变化，因为它会被重新渲染。
如果您的实际目标是在功能组件中实现componentDidMount()，那么您首先不需要钩子。这是一个简单的自定义钩子示例：codesandbox.io/s/dry-field-pe7sn
@ChrisG 那么可能只是一个常规函数？

标签： javascript reactjs react-hooks

【解决方案1】：

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

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

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

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

对于您正在尝试做的事情究竟有更具体的代码会很有帮助，因为目前您的问题太模糊而无法给出更直接的答案。

【讨论】：

我只想触发一次页面浏览 onload。我有一个 GTM 帮助程序库，因此将在我的钩子中调用它。我不想在 myComponent 中直接调用 GTM，因为它不可扩展或可重用。所以我想要一个钩子来做到这一点。我不想使用 HOC，因为它们很丑。但也许我不需要钩子。只是一个普通的功能？

【解决方案2】：

这里不需要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 = () => {
      usePageView();
}

这应该可行。

【讨论】：

是的，这是完美的，我认为：D
这将在每次组件重新渲染时调用该函数。我认为这不是您要寻找的。span>
usePageView 只是useSelector 的包装，并且必须在每次渲染时调用挂钩。