时间戳

首页 > 解决方案 > 带有钩子的useEffect中的Promise函数内的setState？

javascript - 带有钩子的useEffect中的Promise函数内的setState？

问题描述

我正在尝试在 a 内部的 Promise 函数中设置钩子的值，useEffect()并能够将返回的承诺值存储在fruit钩子中，以便我可以在的返回函数中访问它MyComponent()

这是我到目前为止所尝试的：

const MyComponent = () => {
  const [fruit, setFruit] = useState('')

  useEffect(() => {
    // my promise function that returns a string (a random fruit)
    promiseFunction()
      .then(value => setFruit(value))
  }, [])

  return <div>fruit ? fruit : Loading...</div>
}

到目前为止，我已经尝试了很多方法，但没有一个奏效。

useEffect(() => {
  promiseFunction()
    .then(value => setFruit(() => value))
}, [])

useEffect(() => {
  promiseFunction()
    .then(value => setFruit((value) => { fruit = value }))
}, [])

毕竟，钩子的返回值仍然是空的。

没有错误消息或任何东西，我尝试使用另一个 useEffect 进行调试，它仍然在控制台中返回一个。

如何获取 promise 函数的返回值并将其存储在fruit变量中？

标签： javascriptreactjspromisereact-hooks

解决方案

第一个代码示例对我来说看起来很完美。我唯一担心的是函数本身没有正确返回该值。

您是否尝试过记录 promiseFunction 的返回值？编写此代码的另一种方法是使用可以在 useEffect 本身内部调用的函数，如下所示：

useEffect(() => {
  async function loadFruitData() {
    const promiseFunctionReturn = await promiseFunction()
    
    console.log(promiseFunctionReturn)

    setFruit(promiseFunctionReturn)
  }
  
  //Call the function
  loadFruitData();
}, [])

这应该为您提供更好的方式来查看正在发生的事情，而且我也发现它更具可读性。

但是请记住，如果您在 setFruit 之后尝试 console.log() 数据，它不会向您显示更新的状态，这是因为 React 有一个队列来进行由 useState 引起的更新，这使得它看起来像一个异步更新。

推荐阅读