axios 获取请求在 useEffect 中不起作用

Question

我正在使用 axios get request 来检查用户是否使用 jwt 登录，但是，当应用程序启动时，它一直显示加载状态，如果在应用程序第一次启动时它设置为 true，那么它应该发出 get 请求并验证用户，然后将加载状态设置为 false 并导航到特定路线。我得到的是加载状态始终为真，请求不发送到后端服务器。

这里是检查用户是否登录的功能：

 useEffect(() => {
        
        const checkLoggedIn = async () => {
            const Token = await AsyncStorage.getItem('Token');

            if (Token) {
                axios.get('http://localhost:3000/isUserAuth', {
                    headers: {
                        'x-access-token': Token
                    }
                }).then((res) => {
                 
                    setUser(res.data.user)
                    AsyncStorage.setItem("Token", res.token);
                    setIsLoading(false);

                }).catch((error) => {
                    console.log(error)
                    setIsLoading(false);
                });

            } else {
                setUser(null);
                setIsLoading(false)
            }
        }

        checkLoggedIn();

    }, []);

这是后端：

app.get('/isUserAuth', verifyJWT, (req, res) => {
  const token = req.headers['x-access-token'];
  let sqlCheck = `SELECT * FROM users where id =?`;
  CON.query(sqlCheck, req.user, (err, user) => {

    if (user) {
      console.log(user)
      return res.status(400).json({ auth: true, user: user, Token: token })
    }
  })
})

希望有人帮助我找出问题所在。谢谢

Answer 1

//我找到了解决办法

问题出在user 返回undefined 的后端服务器上，而我犯的错误是只检查if(user) 并没有设置else，它没有回复font-end，这表明状态保持真实 所以后端代码应该是这样的：

 CON.query(sqlCheck, req.user, (err, user) => {
    
        if (user) {
         
          return res.status(200).json({ auth: true, user: user, Token: token })
        }else{ return res.status(400).json({ auth: false, user: null })}
      })

Answer 2

当组件挂载时 setIsLoading 为 true，然后根据其值运行 async/await 呢？

useEffect(() => {
 setIsLoading(false);
 if (!setIsLoading) {
  try {
   // fetch code 
  } catch(e) {
    //some error handling 
  } finally {
   // something to do whatever the outcome
  }
 }
})

Answer 3

如果您的加载状态未更改为 false，则表明您的数据库调用没有问题，因为即使您的调用失败，else 也应该触发并仍将加载设置为 false。

可能会考虑缩小功能复杂性并从那里开始构建。可能类似于以下内容以确保您的加载状态正确更新：

useEffect(() => {
  const checkLoggedIn = async () => {
    setUser(null);
    setIsLoading(false)
  }

  checkLoggedIn();
}, []);