在下面的示例中,我试图使用React和Redux Toolkit创建一个简单的登录/身份验证组件。
const Login = () => {
const dispatch = useDispatch();
const [login, { isLoading }] = useLoginMutation();
const [loginData, setLoginData] = useState({
email: '',
password: '',
});
const loginHandler = async () => {
try {
const result = await login({
email: loginData.email,
password: loginData.password,
}).unwrap();
const { token, userId } = result;
const { data } = await dispatch(
backendApi.endpoints.getUser.initiate({ token, userId })
);
dispatch(
setCredentials({
user: {
email: data.user.email,
id: data.user.id,
name: data.user.name,
type: data.user.type,
},
token,
})
);
} catch (err) {
console.log(err);
}
};
return (
<Space>
{isLoading ? (
<SpinnerIcon />
) : (
// setLoginData and loginHandler are set and used here
// Standard React code: Input onChange -> setLoginData / Submit button onClick -> loginHandler
// (nothing special, code shortened for the sake of readability)
<FormWithEmailPasswordInputsAndButton />
)}
</Space>
);
};
这段代码运行良好,但问题在于:
我想利用getUser
查询结果对象上的isLoading
属性,以便在两个请求都完成之前,<SpinnerIcon />
组件可见。
目前spinnerIcon
组件仅在login
API调用期间显示,因为我没有使用React Hooks调用getUser
查询,所以没有将isLoading
属性从getUser
传递到组件的其他部分。
但如果我想使用React Hooks进行调用,我需要先得到login
变异的结果。
const [getUser, { isLoading: isUserLoading }] = useGetUserQuery(resultFromLoginMutation);
我不知道该如何做。请让这两个请求依次执行,这样我就可以同时利用两个isLoading
属性。
const { isLoading: isUserLoading, data: resultFromGetUserQuery } = useGetUserQuery( resultFromLoginMutation, { skip: !isSuccess, } );
- Gustavo MaximoresultFromLoginMutation
上遇到了TS错误: “类型'authData | undefined'的参数无法分配给类型'authData | unique symbol'的参数。 类型'undefined'无法分配给类型'authData | unique symbol'。ts(2345)”因为当它传递给useGetUserQuery
时,resultFromLoginMutation
可能是未定义的。有什么想法如何解决它? - Gustavo Maximo