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

Question

我正在尝试在 useEffect() 中的 Promise 函数中设置钩子的值，并能够将 returned 承诺值存储在 fruit 钩子中，所以我可以在 MyComponent()

的 return 函数中访问它

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

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>
}

到目前为止，我已经尝试了很多方法，但其中 none 行得通。

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

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

之后，钩子的 returned 值仍然是空的。

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

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

Answer 1

第一个代码示例对我来说非常完美。我唯一担心的是该值没有正确地从函数本身 returned。

您是否尝试从 promiseFunction 中记录 return？编写此代码的另一种方法是使用一个可以在 useEffect 内部调用的函数，如下所示：

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

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

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

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

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

setState inside a Promise function in a useEffect with hooks?

javascript

promise

reactjs

react-hooks