调用自定义挂钩时挂钩调用无效

Posted 2023-03-06

【中文标题】调用自定义挂钩时挂钩调用无效

【英文标题】：Invalid Hook Call when calling a custom hook

【发布时间】：2021-12-07 16:00:21

【问题描述】：

我已经尝试解决一个问题 4 天了，我已经搜索和搜索了很多！我不确定我是否只是在寻找错误的东西或看到它并且完全没有注意到它。我的问题是，当我从主函数调用钩子时，它可以工作，但是当我通过 onSubmit 函数调用它时，它会因无效的钩子调用而失败。我理解为什么钩子无效的概念，但我完全不确定如何解决它。我重新格式化了我的钩子，以便我可以在我的代码中更早地初始化它，然后通过 onSubmit 调用它，但问题是状态令牌只在初始化时更新，而不是在它改变时更新。从而导致一些带有错误令牌的 API 调用。任何人都可以提供任何帮助将不胜感激！

设置： NextJS、React-Form、Redux 通过 Next-Redux-Wrapper、SWR

当 ReactForm 验证表单时，我希望它能够将其数据提交到自定义挂钩。但是，该自定义挂钩因无效挂钩调用而失败。只要我为 useState 定义了一个变量，它就会执行此操作。

-- 表单代码 ---

const  register, errors, handleSubmit, setValue, reset, control  = useForm()
<form onSubmit= handleSubmit(onSubmit) >

--onSubmit代码---

const onSubmit = (data) => 
   const newData = useApiPost(`users/update/$ id `, submitData)

-- 自定义钩子--

function useApiPut(resource, params)
   const [ data, setData ] = useState(null)
   const [ error, setError ] = useState(null)

   const  url, data : inData  = rest(resource, params)

   //Post data
   const  data : resData, error : resError, mutate  = useSWR(
      state.user.token ? url : null,
      url => axios.request(
            url,
            method : 'post',
            data : inData,
            headers :  Authorization : `Bearer $ state.user.token ` 
         )
         .then(( data ) => data),
       revalidateOnFocus : false 
   )

   useEffect(() => 
      if(resData) 
         setData(resData)
      
      if(resError) 
         setError(resError)
      
   , [ resData, resError ])

   return  data, error, mutate 

【问题讨论】：

handleSubmit 在哪里？你没有正确绑定onSubmit。

它来自 react-hook-form，我已经更新了我的代码以正确显示这一点。提前感谢您的帮助！

嗨，我的朋友...你能不能把这个<form onSubmit= handleSubmit(onSubmit) >改成这个<form onSubmit= ()=>handleSubmit(onSubmit) >并再次测试？谢谢。

谢谢@AliBriceño，我做到了，不幸的是，它没有解决问题！ :( 非常感谢您的帮助！

这部分对我的大脑不起作用 xD：const onSubmit = (data) => const newData = useApiPost(users/update/$ id , submitData) 你为什么要这样称呼你的钩子？通常所有的钩子都是在状态变量之外声明的，而不是在函数内部。然后，在函数上，您使用挂钩的 return 上公开的值...

【参考方案1】：

所以这个问题的答案最终是一些不同的事情。

首先，通过 store.getState() 访问我的商店值解决了一个挂钩问题。

其次，远离 SWR。毫无疑问，它是一个很棒的包装器并且能够实现 TON。我一直在挣扎，最后放弃了。我开始使用 Axios 拦截器，这真是太棒了。 Axios 不像 SWR 那样缓存（开箱即用），但我正在利用缓存来存储令牌，所以我并没有真正充分利用它的潜力。请注意，我绝不是在抨击 SWR，它是一个非常棒且非常强大的库。

最后，将整套钩子包装到一个函数中，让我可以在页面的根目录初始化该函数，然后访问我以后需要使用的钩子。

因此，现在我的钩子不再只是调用 useApiPost()，而是如下所示：

const useApi = async() => 
   const post = async() => 
      //Do work here
   
   return  post 


export default useApi

然后在main函数里面这样调用：

const  post  = useApi()

在 onSubmit 函数中是这样调用的：

const options = await post(resource, params)

【讨论】：

不建议在常规 JS 函数中使用钩子。 reactjs.org/docs/…