调用自定义钩子时无效的钩子调用

Question

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

设置:NextJS, React-Form, Redux via Next-Redux-Wrapper, SWR

当ReactForm验证表单时，我想让它提交它的数据到自定义钩子。但是，该自定义钩子会因无效钩子调用而失败。只要我为useState定义了一个变量，它就会这样做。

—表单代码—

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

——onSubmit Code——

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 Interceptors，感觉非常棒。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)