React Next.js 不在生产应用程序中调用 useEffect 钩子

Question

I have a decently large Next.js/React application. A few days ago, some pages which worked flawlessly before, started behaving weirdly - more specifically, some Axios requests inside of a useEffect hook stopped being sent at all.

More details:

This is the file which is causing the bugs:

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

As you can see I'm using react context here for the authentication in my app. This component here is located in the _app.js file, and the different next.js pages are passed as children of the <ContextProvider/> .

As you can also see, this file sends a request to auth-staus in it's useEffect hook, which tells the app whether the user is logged in or not. The problem is, and I found this only occurs in pages that have a getServerSideProps function, and only in production using a production build , that this request is simply not sent. What ends up happening is the auth state stays at null which in the end leads to the page loading infinitely for the user.

Why is this happening, and what can I do to solve this bug?

PS : I will gladly provide any other info you need to answer this EDIT : I know the request isn't sent because it doesn't appear in the console's network tab

Answer 1

It is not recommended to use async in useEffect callback like @Dimitri said. Try something like this.

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