useEffect 中的异步函数返回未定义答案

【问题标题】：Async function inside useEffect return undefineduseEffect 中的异步函数返回未定义
【发布时间】：2022-12-05 00:38:27
【问题描述】：

我在 useEffect 中有一个异步函数

  useEffect(() => {
    async function fetchData() {
      const res = await checkLogin();
      console.log(res);
    }

    fetchData();
  }, []);

checkLogin 返回“Hello world”

 async function checkLogin() {
  try {
  const resp = await linstance.get("/api/auth/user");

  setUser(resp.data.user);
  setEmail(resp.data.email);
  setId(resp.data.id);

  return "Hello world";
} catch (error) {
  return error.response;
}

}

为什么在 console.log 中打印未定义？

我希望 checkLogin 响应为“Hello world”（明确说明）

【问题讨论】：

发布checkLogin

标签： reactjs next.js

【解决方案1】：

看起来您正在尝试在 useEffect 挂钩中使用 fetchData 函数，但您没有返回它。 useEffect 钩子期望您传递给它的函数返回一个清理函数，或者什么都不返回。

您可以通过从 useEffect 挂钩返回 fetchData 函数来解决此问题，或者使 fetchData 函数本身成为直接传递给 useEffect 的回调。这是您如何做到这一点的示例：

useEffect(() => {
    async function fetchData() {
        const res = await checkLogin();
        console.log(res);
    }

    // Call the fetchData function directly
    fetchData();
}, []);

或者，您可以像这样从 useEffect 挂钩返回 fetchData 函数：

useEffect(() => {
async function fetchData() {
const res = await checkLogin();
console.log(res);

}

// Return the fetchData function so it can be used as a cleanup function return fetchData; }, []);

这些方法中的任何一种都应该允许您在控制台中查看 checkLogin 函数的输出。

【讨论】：

不明白你的意思，你的代码看起来像我的。你能证明你的答案吗？

【解决方案2】：

在 checkLogin() 中，您的代码包含 try/catch。如果 try 块成功运行，您将在控制台中看到“Hello world”。

但很可能您的代码落入了catch 块。它抛出错误并且 error 对象没有 response 属性。在catch块中

 catch (error) {
  // check what is logging here
  console.log("error in fetchLogin", error)
  return error.response;
}

【讨论】：