Question

我有：

基本上是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不是一个钩子，对吗？我究竟做错了什么？

Answer 1

如果您看看此codesandbox，一切正常。

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

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

2-您确定MyContainer是MyComponent的父母吗？

您需要类似

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

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

在您的问题中，您有MyComponent返回<something />。如果不是响应组件，您将得到该错误。

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

Answer 2

是的，你们都没错。此代码可以正常工作。

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

我可以在自定义挂钩中传递回调aync函数吗？无效的挂接调用错误

2 个答案: