使用 useEffect 进行登录验证

Question

我正在尝试使用钩子在我的反应应用程序中实现登录。我正在使用useEffect钩子来调用api以获取凭据。收到凭据后，我正在上下文中更新状态。但似乎国家没有更新。我做错了什么？

useEffect(() => {
async function fetchdata(){
try {
var url = 'http://localhost:3292/ExamService.svc/getuser/'+ user +'/'+ pass;
var output = await fetch(url).then((result) => result.json());
setLogUser(output[0].Name); 
setIslogin(true); 
}
catch {
console.log('error')
}
}
if(isLoading === true){
fetchdata();
}

},[isLoading])
const handleSubmit = () => {

setLoading(true);
console.log(isLogin); // it is coming false

}

Answer 1

你以一种奇怪的方式混合了异步和同步代码。isLogin 控制台.log 是假的，因为 useEffect 内部的承诺还没有解决。实际上您不需要useEffect来执行此操作，我认为此代码段以这种方式会更干净

const fetchData = async () => {
try {
const url = 'http://localhost:3292/ExamService.svc/getuser/'+ user +'/'+ pass;
const output = await ( await fetch(url) ).json()
setLoading(false)
return output
}
catch(err){
setLoading(false)
console.log(err)
}
}
const handleSubmit = async () => {
setLoading(true);
const authData = await fetchData()
if(authData){
setLogUser(authData[0].Name); 
setIslogin(true); 
}
}