問題描述
在React/next.js 開發上，有時候會出現以下錯誤訊息
後來查問題，才發現在於原先的代碼中，在使用 useEffect 時，已將其設定為 async ，如下:
useEffect(async () => {
try{
// 呼叫API
} catch (error) {
// API錯誤處理
}
}, [])而後續因應功能需求，將 API 部分獨立出來後，如果 useEffect 依舊設定為 async ，則會導致出現 Uncaught TypeError: destroy is not a function 錯誤
const getApiData = async () => {
try{
// 呼叫API
} catch (error) {
// API錯誤處理
}
}
/* 錯誤範例
* useEffect 設定為 async
* 導致 Uncaught TypeError: destroy is not a function
*/
useEffect(async () => {
getApiData()
}, [])解決方法
檢查 useEffect 是否有必要設定為 async，如下方範例，useEffect 中並無需要設定為 async，刪除 async 設定，便可解決這錯誤
// 獨立的 api function
const getApiData = async () => {
try{
// 呼叫API
} catch (error) {
// API錯誤處理
}
}
// useEffect 移除 async 設定
useEffect(() => {
getApiData()
}, [])
發表迴響