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

Question

我已经尝试解决一个问题 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 }
}

Answer 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)