如何使用帶有異步函數的反應鈎子“useMemo”？

Question

（關閉）

我如何等待、解決/拒絕由包裹在反應鈎子“useMemo”中的 function 返回的 promise？

目前，我的代碼如下所示：

  // Get the persisted email/username
  const persistedUsername = useMemo(async () => {
    let username;

    try {
      username = await AsyncStorage.getData(`@${ASYNC_STORAGE_KEY}:username`);
    } catch {}

    return username;
  }, []);  

---

編輯

我想要實現的是在渲染組件之前獲取數據，某種“componentWillMount”生命周期。 我的兩個選擇是：

1. 使用 useMemo 掛鈎計算值以避免不必要的重新計算。
2. 結合 useEffect + useState。 不是最好的主意，因為 useEffect 在組件繪制之后運行。

@DennisVash 在評論中提出了這個問題的解決方案：

使用 useLayoutEffect 掛鈎（某種 componentDidMount/componentDidUpdate）阻止所有視覺效果，其中代碼在 DOM 更新后立即運行，但在瀏覽器有機會“繪制”這些更改之前。

---

如您所見，persistedUsername 仍然是 promise （我不是在等待異步函數的結果）...

有任何想法嗎？ 用這個鈎子執行異步作業不是一個好主意嗎？ 有什么定制的鈎子嗎？

還有，這種方式執行這個操作，與使用useEffect和useState相比，有什么缺點呢？

與 useEffect 和 useState 相同：

  useEffect(() => {
    // Get the persisted email/username
    (async () => {
      const persistedUsername = await AsyncStorage.getData(
        `@${ASYNC_STORAGE_KEY}:username`
      );

      emailOrUsernameInput.current.setText(persistedUsername);
    })();
  }, []);

謝謝你。

Answer 1

似乎問題是關於如何將componentWillMount與鈎子一起使用，這幾乎等同於useLayoutEffect （因為不推薦使用componentWillMount ）。

有關更多附加信息，您不應在useMemo useMemo解析async操作，因為您將阻塞線程（並且 JS 是單線程的）。

意思是，您將等到 promise 得到解決，然后它將繼續計算組件。

另一方面，像useEffect這樣的異步鈎子是更好的選擇，因為它不會阻塞它。