我正在尝试设置一个用于我的登录页面的上下文挂钩。我正在使用打字稿。我启动了上下文挂钩,但遇到了类型声明的问题。当我尝试使用 setUser 时,会弹出以下错误:类型“{}”上不存在属性“setUser”。
这是到目前为止我的上下文挂钩。
import { createContext, ReactNode, useEffect, useState } from "react" interface Props { children?: ReactNode } export const UserContext = createContext({}) export function UserContextProvider({children}: Props) { const [user, setUser] = useState(null) return ( <UserContext.Provider value={{user, setUser}}> {children} </UserContext.Provider> ) }
这是我的登录代码。
import { Link, Navigate } from "react-router-dom" import axios from 'axios' import { UserContext } from "../UserContext" const Login = () => { const [email, setEmail] = useState('') const [password, setPassword] = useState('') const [redirect, setRedirect] = useState(false) **const {setUser} = useContext(UserContext)** async function handleLogin(e: any) { e.preventDefault() try { const userInfo = await axios.post('/auth/login', {email, password}) setUser(userInfo) alert('Login') setRedirect(true) } catch (e) { alert('Login failed') } } if(redirect){ return <Navigate to={'/'} /> } return ( <div> <div> <h1>Login</h1> <form onSubmit={handleLogin}> <input type="email" placeholder="your@email.com" value={email} onChange={e => setEmail(e.target.value)}/> <input type="password" placeholder="password" value={password} onChange={e => setPassword(e.target.value)}/> <button>Login</button> <div> Don't have an account? <Link to={"/auth/register"}> Sign Up</Link> </div> </form> </div> </div> ) } export default Login
您需要为
UserContext
变量指定类型。因为您在createContext
中为其指定了{}
参数,所以 Typescript 假定上下文的类型为React.Context<{}>
。因此,当您尝试使用上下文对象时,您会得到一个{}
,一个空对象,它没有用户定义的属性。首先,我将定义一个新界面,但您可以根据需要键入它。
要声明
UserContext
的类型,您可以:提供与类型匹配的默认值
将默认上下文值设置为空对象/null
对空对象进行类型转换(类型安全性较差)
非空断言(类型安全性较差)
请注意,对于其中一些,您需要稍后编写空检查。请参阅此处了解更多信息。