Vite Reactjs网站应用程序在生产环境中未调用API，但在本地主机上正常运行

Question

我正在尝试在Netlify上部署我的应用程序。登录页面会获取一系列图片以创建画廊效果。 本地主机上的登录页面 在本地机器上运行良好，但在部署之后，API没有被调用，并且应用程序处于加载状态。 Netlify服务器上的登录页面。 我在开发工具的网络选项卡中发现API在本地主机上被调用了 本地主机网络选项卡 并且在开发服务器上API请求没有被触发。 部署服务器网络选项卡。

API调用的代码是 API调用代码

我不知道该怎么办。我正在尝试使API在生产环境中正常工作。

Answer 1

在你的useEffect中，你没有调用fetchImage，而是在返回它。

将

useEffect(()=>fetchImage, [])

修改为

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

或者直接

useEffect(fetchImage, [])

之所以在本地环境下能够运行，原因有点有趣。当你在useEffect钩子函数中返回一个函数时，它将在组件的销毁阶段使用，这意味着当React卸载组件时会调用该函数。在开发模式下，React在挂载组件后会卸载和重新挂载组件，从而调用fetchImage - 你的销毁函数。而在生成环境中不会这样做。