javascript - 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>
  );
}

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

你也可以看到，这个文件向auth-staus它的useEffect钩子发送一个请求，它告诉应用程序用户是否登录。问题是，我发现这仅发生在具有getServerSideProps功能的页面中，并且仅在使用生产构建的生产中发生，根本不发送此请求。最终发生的是最终导致页面为用户无限加载的auth状态。null

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

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

标签： javascriptreactjsnext.jsserver-side-rendering

Answer 1

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

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>
  );
}