React native 无效的钩子调用。钩子只能在函数组件的主体内部调用，在进行函数调用时会出现此错误

我已经创建了一个自定义钩子，点击一个按钮就会触发一个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副本

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

是您试图执行的非法操作，因为您调用的钩子不是在组件的主体上，但您可以做的是从钩子返回一个

refresh

函数

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

如果您能提供更多的自定义钩子实现，我将能够更新

刷新
和rest使用，无论如何，希望这对您有所帮助

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

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

如果您能提供更多的自定义钩子实现，我将能够更新
刷新
和rest使用，无论如何，希望这对您有所帮助

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

export default useHookComponent;