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

Question

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

这是我迄今为止尝试过的：

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变量中？

Answer 1

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

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

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

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

这应该可以让您更好地了解正在发生的事情，而且我还发现它更具可读性。

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