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 - 你的銷毀函數。而在生成環境中不會這麼做。