Question

我正在尝试在 useEffect() 内的 Promise 函数中设置钩子的值，并且能够将返回的承诺值存储在 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变量中？

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 引起的更新，这使它看起来像一个异步更新。

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

1 个答案: