如何使用异步 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变量中。