如何使用異步 function 在 useMemo 中設置 state？

Question

我正在嘗試使用useMemo()在服務器端的ComponentWillMount生命周期中獲取數據

  const [text, setText] = useState('hello')
  
  const fakeApiCall = new Promise(resolve => 'world')
  
  useMemo(async () => {
    const value = await fakeApiCall
    setText(value)
  }, [])

這樣做， text的值仍將保持hello而不是world 。 有可能實現這一目標嗎？ 為什么這不起作用？

Answer 1

如您所知，await 將返回一個“promise 對象”，並且在響應出來后它將被替換為“promise value”，您只需要一個 falge 來檢測何時獲得成功響應。

你的代碼看起來像

  const [text, setText] = useState('hello')
  
  const fakeApiCall = new Promise(resolve => 'world')
  
  const [flage,setFlag] = useState(false) //adding whatever your flag name

  useMemo(async () => {
    const response = await fakeApiCall

    if(response.Success) // you will check on response result
    {
     setText(value)
    }
  }, [])

或者你可以檢查這個Promise.resolve(valueOrPromiseItDoesntMatter).then

Answer 2

實際上，您可以在這里使用useState和useEffect實現您所需要的一切：

  const [text, setText] = useState('hello')
  
  const fakeApiCall = new Promise(resolve => 'world')

  useEffect(() => {
    fakeApiCall()
      .then(response => { setText(response) })
  },[])

請注意，您不需要在useEffect掛鈎中使 function 異步，因為它將通過典型的 promise 流正常解析。

由於我們沒有向依賴數組傳遞任何內容，因此該掛鈎將在組件掛載時執行一次，並有效地將響應存儲在text變量中。