Question

我创建了一个自定义钩子，单击按钮即可触发API请求。

我的代码限制如下：

父组件：

import HookComponent from "./HookComponent";

const parentComponent=()=>{

const callHook=()=>{

const [response,error]=HookComponent()

}

return(
//inside a button component triggering the function  
 onPress={()=>callHook()}

}


Hook:

const HookComponent =()=>{
...
//making API CALL
return [response,error]
}

export default HookComponent;

在尝试此操作时遇到如下错误：无效的挂接调用。挂钩只能在功能组件的主体内部调用。可能由于以下原因之一而发生： 1.您的React和渲染器版本可能不匹配（例如React DOM） 2.您可能违反了《钩子规则》 3.您可能在同一应用程序中拥有多个React副本

如何解决此问题？ TIA，法鲁克

Answer 1

const callHook=()=>{
   const [response,error] = HookComponent()
}

是您尝试执行的非法操作，因为您不是在组件主体上调用该钩子，而是可以从钩子中返回一个refresh函数

                               // changed it to pattern hook naming
const [response,error, refresh]= useHookComponent()
const callHook= () => refresh()

const useHookComponent = () => {
  ...
  //making API CALL
  ...
  const refresh = () => //making API CALL AGAIN
  return [response, error, refresh]
}

export default useHookComponent;

如果您将提供更多自定义的挂钩象征，那么我也将能够更新refresh并休息使用，无论如何希望它会有所帮助

无效的挂接调用。挂钩只能在函数组件的主体内部调用，在进行函数调用时会收到此错误

1 个答案: