在React中,我使用context API
设置用户数据或API请求返回的错误:
// context
const [currentUser, setCurrentUser] = useState("")
const [error, setError] = useState("")
async function login(credentials) {
setError("")
try {
...API request
const data = await response.json()
if(data.success) {
setCurrentUser(data)
} else {
setError(data.error)
}
} catch (error) {
setError("Something went wrong. Please try again.")
}
}
<AuthContext.Provider value={login, currentUser, error}>
{children}
</AuthContext.Provider>
然后在我的组件中:
//component
const { login, currentUser, error } = useContext(AuthContext)
const onSubmit = async (credentials) => {
setLoading(true)
await login(credentials)
resetForm({})
setLoading(false)
!error && navigate("/")
}
return (
...
)
现在,onSubmit
函数允许用户从navigate
到/
,即使context
设置了error
,这是因为(我认为)在判断error
时,error
仍然是null
,组件没有机会重新加载以获得最新值.
避免这种行为的最佳方法是什么?我应该在组件中本地处理错误,而不是在context
中处理错误吗?如果是,在我的场景中,最好的方法是什么?
非常感谢.