我有一个对一个工作良好的API的前端调用:
const handleSubmit = async (e: any) => {
e.preventDefault();
setLoading((loading) => !loading);
setResult('');
const login = useRouterseUser()
console.log('submitted form')
try {
// login= useUser() //the substitute i'de like to make//
// login(email,password)//subsitute i'de like to make for the api call below\\
const response = await axios.post('/api/login', {email, password} ) // Send as query paramers );
setIsloggedin(()=> true)
router.replace('/dashboard')
} catch (error) {
alert(JSON.stringify(error.response.data.detail));
}
finally{
setLoading((loading) => !loading)
}
}
然而，我创建了另一个文件来从usecontext挂钩内进行api调用，这样我就可以使用响应作为整个应用程序的全局可用变量.为此，我在上下文中定义了一个函数，并将应用程序包装在上下文提供者中，如下所示:
export default function RootLayout({children}: { children: React.ReactNode}) {
return (
<html lang="en">
<body className={inter.className}>
<UserProvider>{children}</UserProvider>
</body>
</html>
)
}
该调用不起作用，它无法访问API，因为上下文不可用. 上下文页面如下:
'use client'
import { ID } from "appwrite";
import { createContext, useContext, useEffect, useState } from "react";
import { account } from '../appwrite'
const UserContext = createContext();
export function UserProvider(props) {
const [user, setUser] = useState(null);
async function login(email, password) {
const loggedIn = await axios.post('/api/login', {email, password} )
setUser(loggedIn);
}
async function register (email, password, name) {
await axios.post('/api/signup', { email, password, name} );
}
async function logout() {
await axios.post('/api/currentuser');
// await account.deleteSession("current");
setUser(null);
}
async function init() {
try {
const loggedIn = await account.get();
setUser(loggedIn);
} catch (err) {
setUser(null);
}
}
useEffect(() => {
init();
}, []);
return (
<UserContext.Provider value={{ current: user, login, logout, register }}>
{props.children}
</UserContext.Provider>
);
}
export function useUser() {
return useContext(UserContext) ;
}
我收到一个错误，指出上面的useuser()函数输出是: 错误:无效的挂钩调用.Hooks只能在功能组件的体内调用.这种情况可能出于以下原因之一发生:
- 您可能有不匹配的React和渲染器版本(例如React多姆)
- 你可能违反了胡克规则
- 同一应用程序中可能有多个React副本 有关如何调试和修复此问题的提示，请参阅https://reactjs.org/link/invalid-hook-call.
有人能帮忙吗？我觉得我想做的事情很简单.