如何在useEffect下使用RTK查询



我有一种情况,我试图在用户登录时获取数据,我的结构是我有两个redux切片,一个是userData,另一个是UserCartData和

  1. 当用户登录时,如果登录成功
  2. 那么我将把数据分派到UserData中,3,然后我写了一个useEffect来检查是否有userData
  3. 然后我将使用UserData获取UserCartData

但问题是我无法在useEffect下获得useGetxxxQuery工作,这是我的代码

const Login = () => {
const user = useAppSelector(state=> state.auth);
const dispatch = useAppDispatch();
const [login] = useLoginMutation();
const [showPassword,setShowPassword] = useState<boolean>(false);
useEffect(() => {
if (user!==null){ //fecth userCart data with userData
const {data ,isLoading,isFetching }= useGetCartByIDQuery(user.user?._id!)
}
}, [dispatch])
return (
<Container>
<Wrapper>
<Title>SIGN IN</Title>
<Formik
initialValues={{ email: "", password: "" }}
validationSchema={Yup.object({
password: Yup.string()
.min(8, 'Must be 8 characters or higher')
.required(),
email: Yup.string().email('Invalid email address').required(),
})}
onSubmit = {  async (values, actions) => {
try{
const result = await login(values);
if("data" in result){
//console.log(result.data.data)
dispatch(setCredentials({user:result.data.data.findUser,token:result.data.data.cookie}))

}else{
const err = (result.error as RequestError).data.message
if(err.includes("password")){
actions.setErrors({password:err})
}else if(err.includes("Facebook")){
actions.setErrors({email:err})
}
}
}catch(err){
console.log(err)
}             
}}>
//....unrelevant code

这里不需要useEffect,只需使用skipToken:

import {skipToken} from '@reduxjs/toolkit/query'
const {data, isLoading, isFetching } = useGetCartByIDQuery(user.user ? user.user._id : skipToken)

您不能在其他钩子中使用钩子。这是一条规则
来源:https://reactjs.org/docs/hooks-rules.html
您可以更改useGetCartByIDQuery挂钩,然后只使用其中的一个函数:例如:const { startFetch } = useGetCartByIDQuery

useEffect(() => {
startFetch('your arguments')
}, [])

相关内容

  • 没有找到相关文章

最新更新