如何在 React 的 useEffect 中使用 async 函式

useEffect 通常是 React 中進行資料擷取的地方。資料擷取意味著使用非同步函式，而在 useEffect 中使用它們可能不像你想的那麼直接。繼續閱讀以了解更多！

錯誤的方式

有一種在 useEffect 中進行資料擷取的錯誤方式。如果你寫下以下程式碼，你的 linter 會對你大叫！
-------------------------------------------
| 我是說你有在使用 linter 吧?? |
-------------------------------------------

// ❌ 不要這樣做
useEffect(async () => {
const data = await fetchData();
}, [fetchData])

這裡的問題是 useEffect 的第一個參數應該是一個回傳空值（undefined）或函式（用來清理副作用）的函式。但 async 函式回傳一個 Promise，而 Promise 無法被當作函式呼叫！這根本不是 useEffect hook 對其第一個參數的期望。

那麼如何在 useEffect 中使用非同步程式碼呢？

通常的解決方案是直接在 useEffect 中撰寫資料擷取程式碼，就像這樣：

useEffect(() => {
// 宣告資料擷取函式
const fetchData = async () => {
const data = await fetch('https://yourapi.com');
}
// 呼叫函式
fetchData()
// 確保捕捉任何錯誤
.catch(console.error);
}, [])

總結：你不能直接讓 useEffect 成為非同步，因為它期望同步的清理回傳值。相反，請在 effect 區塊中宣告並呼叫你的 async 函式。

我是 Nmesoma Ononogbo，一位軟體工程師，致力於建構創新的解決方案，賦能企業並創造卓越的使用者體驗，同時不斷突破現代技術的可能性。