我正在尝试使用rtkquery编写loginForm,收到错误消息需要帮助
LoginFom.js
import { useState,useEffect } from 'react';
import { useAuthenticateUserQuery } from '../store';
import { usersApi } from '../store/apis/userApi';
import { useNavigate } from 'react-router-dom';
function LoginForm() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [isLoggedIn, setIsLoggedIn] = useState(false);
const navigate = useNavigate();
const handleSubmit = async (e) => {
e.preventDefault();
const { data: matchingUser, isFetching } = useAuthenticateUserQuery({ email, password
});
console.log('isFetching', isFetching);
console.log('matchingUser', matchingUser);
if (!isFetching) {
if (matchingUser !== null) {
setIsLoggedIn(true);
navigate('/dashboard');
} else {
alert('Invalid username or password');
}
}
};
return (
<form onSubmit={handleSubmit} className="max-w-sm mx-auto">
<div className="mb-4">
<label htmlFor="email" className="block text-gray-700 font-bold mb-2">
Email
</label>
<input
type="email"
id="email"
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div className="mb-6">
<label htmlFor="password" className="block text-gray-700 font-bold mb-2">
Password
</label>
<input
type="password"
id="password"
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
<div className="flex items-center justify-between">
<button
type="submit"
disabled={!email || !password || isFetching}
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
>
Login
</button>
</div>
</form>
);
}
export default LoginForm;
UserAPI.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
export const usersApi = createApi({
reducerPath: 'usersApi',
baseQuery: fetchBaseQuery({
baseUrl: 'http://localhost:3005',
prepareHeaders: (headers, { getState }) => {
const token = getState().auth.token;
if (token) {
headers.set('authorization', `Bearer ${token}`);
}
return headers;
},
}),
endpoints: (builder) => ({
register: builder.mutation({
query: (user) => ({
url: '/users',
method: 'POST',
body: user,
}),
}),
getUsers: builder.query({
query: () => '/users',
}),
authenticateUser : builder.query({
query: (credentials) => ({
url: '/users',
method: 'GET',
params: {
email: credentials.email,
password: credentials.password
},
}),
transformResponse: (response, query) => {
console.log("****",response)
const users = response?.users;
console.log(users,"**222**")
const matchingUser = users?.find((u) => u.email === query.params.email && u.password === query.params.password);
console.log(matchingUser,"**888**")
return matchingUser || null;
},
}),
}),
});
export const { useRegisterMutation, useGetUsersQuery, useAuthenticateUserQuery } = usersApi;
创建db.json作为本地jsonserver
{
"users": [
{
"username": "qq",
"email": "qq@gmail.com",
"password": "qq",
"id": 1
}
]
}
我收到错误
第15行:48:React Hook“useAuthenticateUserQuery”在函数“handleSubmit”中被调用,该函数既不是React函数组件也不是自定义React Hook函数。React组件名称必须以大写字母开头。React Hook名称必须以单词“use”开头react-hooks/rules-of-hooks第59行:44:未定义“isFetching”
1条答案
按热度按时间pjngdqdw1#
你不能在回调中使用钩子,而且你永远不应该使用查询来将数据发送到服务器。
请对此使用一个突变,这将为您提供一个可以在处理程序中使用的
trigger
函数。我强烈建议你遵循official Redux Tutorial on RTK Query,这将教你突变,除其他外。