我可以在自定义钩子中传递回调异步函数吗？无效的钩子调用错误答案

【问题标题】：Can i pass callback aync function in custom hook? Invalid hook call error我可以在自定义钩子中传递回调异步函数吗？无效的钩子调用错误
【发布时间】：2019-10-22 16:41:48
【问题描述】：

我有：

一个自定义的钩子，基本上是useContext(MyContextName);。

一个组件Container，它接收孩子并将它们包装在我的上下文提供程序中并将我的函数传递给那里；

我想在其中使用我的功能的组件。我正在从自定义钩子中解构它并尝试在useEffect 中调用它。

我不能包含代码，但这里是简化版：

const MyContext = createContext({});

export const MyContainer = ({children}) => {
 const MyCoolFunction = async() =>{
  //do something
 }
 return (
  <MyContext.Provider value={{
      MyCoolFunction
    }}>
    {children}
  </MyContext.Provider>
 )
}

export const useMyHook = () => useContext(MyContext);

在另一个组件中我会这样做

const MyComponent = () => {
  const {MyCoolFunction} = useMyHook();

  useEffect(() => {
    MyCoolFunction();
  }, []);

  return <something />;
}

在调用MyCoolFunction 的那一刻，我收到“无效的挂钩调用”错误。但是MyCoolFunction 不是一个钩子，是吗？我究竟做错了什么？

【问题讨论】：

codesandbox.io/embed/new?fontsize=14这里没有错。问题是你在哪里打电话给useMyHook？
@Dupocas，不，我检查了这个。它不起作用，但出于其他一些原因。我现在只需要处理这个无效的钩子调用来修复其余的功能
发布一个包含更多细节的沙盒

标签： reactjs react-hooks react-context

【解决方案1】：

如果你看看这个codesandbox，一切正常。

所以这是我对您为什么会收到错误的假设。

1 - 因为您没有提到错误在哪里，所以它可能是来自其他组件的错误。请提供错误发生的位置。

2 - 你确定你有MyContainer 作为MyComponent 的父级吗？

你需要类似的东西

return (
    <MyContainer> // parent of MyComponent
        ...
        <MyComponent />
    </MyContainer>
)

3 - 可能您在不是反应组件的函数中使用了钩子。

在您的问题中，您有MyComponent 返回<something />。如果那个东西，不是一个反应组件，你会得到那个错误。

如果这些都不起作用，请提供“invalid hook call”的完整错误以获得更详细的答案。

【讨论】：

好点。他使用上下文的方式实际上没有任何问题
好吧，我猜错误是在其他地方。我检查了你的假设，一切似乎都是正确的。
Vencovsky，我检查了你的假设，这一切似乎都是正确的。 1 - 我实际上不知道。错误消息并没有告诉我发生错误的位置。它只是说 react-dom.development.js:55。但是我评论了可能导致此问题的所有其他组件，当我评论 MyCoolFunction 的调用时，我没有收到此错误。所以我假设当我在 useEffect 中调用 MyCoolFunction 时会发生这种情况。 2 - MyContainer 位于 App 组件中，该组件包装了具有 MyComponent 路由的路由器。应该工作，对吧？ 3 - 不，它绝对是一个组件
@Kruvorychka 使用您提供的代码，我制作了一个代码框，它运行良好，可能有一些东西或代码您没有在您的问题中添加。您能否创建一个代码框，以便我调试它并解决问题？没有你的codesanbox，我将无法解决你的问题

【解决方案2】：

是的，你们都是对的。这段代码工作正常。

问题出在 MyCoolFunction 的“//做某事”部分。我只是在其中调用了另一个钩子，结果我在 useEffect 钩子中间接调用了 myAnotherHook。不能这样做

【讨论】：