Vite Reactjs website app not calling API in production but running fine on localhost

Question

I'm trying to deploy my application on Netlify. The landing page fetches a series of images to create a gallery effect. The login page is running fine on the local machine, but after deployment the API is not being called and the application is in a loading state. Login page on Netlify server. I found in the network tab of the development tools that the API was being called on localhost the localhost network tab and on the development server the API request was not being fired. Deploy the server network tab. The code for the API call is the API call code. I don’t know what to do.

P粉685757239 · Answer

In your useEffect, you are not calling fetchImage, you are returning it.

Will

useEffect(()=>fetchImage, [])

change into

useEffect(()=>fetchImage(), [])

or directly

useEffect(fetchImage, [])

The reason why it can run in the local environment is a bit interesting. When you return a function in a useEffect hook function, it will be used during the component's destruction phase, which means that the function will be called when React unloads the component. In development mode, React will unmount and remount the component after mounting it, thus calling fetchImage - your destruction function. This doesn't happen in a build environment.