[翻譯]如何在React hooks useEffect中使用異步函數(Typescript/JS)？

乍一看，你可能會想到相似的事情，例如從遠程API獲取內容。

const MyFunctionnalComponent: React.FC = props => {
  useEffect(async () => {
    await loadContent();
  }, []);
  
  return <div></div>;
 }
複製代碼

會出現什麼問題？

若是你使用Typescript, 則編譯器會產生以下結果：

Argument of type '() => Promise<void>' is not assignable to parameter of type 'EffectCallback'.
複製代碼

讓咱們經過異步函數的定義來看看爲何會出現這個問題：

A function that allows to use asynchronous instructions with the await keyword which will block the statement execution as long as the Promise after which the await keyword is doesn’t resolve…

也就是說，容許將異步指令與await關鍵字一塊兒使用的函數，只要不解決await關鍵字以後的Promise，它將阻止語句執行…

沒問題吧，好吧……可是等等……

This function will also return a Promise, no matter if you explicitly return something or not. In case you return data, it will be wrapped in the resolving content of the promise that the function will create and return automatically.

不管您是否明確返回某些內容，此函數都會返回一個Promise。萬一你返回數據，它將包裝在promise的解決內容中，自動建立並返回。

您開始發現問題了嗎？沒有？ 讓咱們閱讀一下useEffect hook文檔來獲取更多信息。

Often, effects create resources that need to be cleaned up before the component leaves the screen, such as a subscription or timer ID. To do this, the function passed to useEffect may return a clean-up function. For example, to create a subscription.

一般，effects須要在組件離開屏幕以前清除建立的資源，例如訂閱或計時器ID。爲此，傳遞給useEffect的函數應該返回一個清理函數。

使用異步函數會使回調函數返回Promise而不是cleanup函數

這就是爲何使用Typescript編譯器會產生提示的緣由。這種模式在JS中也不起做用，由於react不會等待Promise

如何處理useEffect中的異步函數？

經過使用如下技巧，咱們能夠在effects中使用異步函數：

const MyFunctionnalComponent: React.FC = props => {
  useEffect(() => {
    // Create an scoped async function in the hook
    async function anyNameFunction() {
      await loadContent();
    }
    // Execute the created function directly
    anyNameFunction();
  }, []);
return <div></div>;
};
複製代碼

如今，你的代碼是安全的，由於你什麼也不返回，編譯器也中止提醒。

你也可使用IIFE。

const MyFunctionnalComponent: React.FC = props => {
  useEffect(() => {
    // Using an IIFE
    (async function anyNameFunction() {
      await loadContent();
    })();
  }, []);
  return <div></div>;
};
複製代碼

原文地址：medium.com/javascript-…