React Next.js 未在生产应用程序中调用 useEffect 挂钩

Question

我有一个相当大的 Next.js/React 应用程序。几天前，一些以前完美无缺的页面开始出现奇怪的行为——更具体地说，useEffect 钩子内的一些 Axios 请求根本停止发送。

更多详情：

这是导致错误的文件：

export const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [auth, setAuth] = useState(null);

  useEffect(async () => {
    const { data: result } = await axiosApp.get("/auth-status"); // axiosApp = same thing as axios
    setAuth(result);
  }, []);

  return !auth ? (
    <div className="pretend-this-is-a-progress-bar"></div>
  ) : (
    <AuthContext.Provider value={[auth, setAuth]}>{children}</AuthContext.Provider>
  );
}

如您所见，我在此处使用 react 上下文在我的应用程序中进行身份验证。这里这个组件位于_app.js文件中，不同的next.js页面作为<ContextProvider/>的children传递。

您还可以看到，此文件在其useEffect 挂钩中向auth-staus 发送请求，该挂钩告诉应用程序用户是否已登录。问题是，我发现这仅发生在具有getServerSideProps 函数的页面中，并且仅在使用生产构建的生产中发生，根本不会发送此请求。最终发生的是auth 状态保持在null，这最终导致页面为用户无限加载。

为什么会发生这种情况，我可以做些什么来解决这个错误？

PS：我很乐意提供您回答此问题所需的任何其他信息 编辑：我知道请求没有发送，因为它没有出现在控制台的网络标签中

Answer 1

不建议像@Dimitri 说的那样在useEffect 回调中使用异步。试试这样的。

export const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [auth, setAuth] = useState(null);

  useEffect(() => {
    async function fetchAuthStatus() { 
      const { data: result } = await axiosApp.get("/auth-status"); // axiosApp = same thing as axios
      setAuth(result);
    }
    fetchAuthStatus();
  }, []);

  return !auth ? (
    <div className="pretend-this-is-a-progress-bar"></div>
  ) : (
    <AuthContext.Provider value={[auth, setAuth]}>{children}</AuthContext.Provider>
  );
}