我应该在 setState 之后或在 useEffect() 的依赖数组中立即调用 returns 承诺的函数

Question

我的代码（似乎工作正常）如下所示：

import { SplashScreen } from "@capacitor/splash-screen";

const MyComponent = () => {
  const [data, setData] = useState()

  useEffect(() => {
    init()
  }, [])

  const init = async () => {
    const response = await fetch("some_api")
    setData(response.data)
    await SplashScreen.hide()
  } 

  return (<div>{JSON.stringify(data)}<div>)
}

但我想知道将 await SplashScreen.hide() 函数调用移动到具有依赖项数组中的数据的 useEffect() 是否更好：

import { SplashScreen } from "@capacitor/splash-screen";

const MyComponent = () => {
  const [data, setData] = useState()

  useEffect(() => {
    init()
  }, [])

  useEffect(() => {
    if (data) {
      await SplashScreen.hide()
    }
  }, [data])

  const init = async () => {
    const response = await fetch("some_api")
    setData(response.data)
  } 

  return (<div>{JSON.stringify(data)}<div>)
}

注：SplashScreen.hide() returns一个承诺。哪种方式更好，为什么？

Answer 1

看你要不要在设置数据后调用SplashScreen.hide()。在第一种情况下，由于 setState 异步工作，因此不能保证在设置数据后调用。但是在第二种情况下，您在更新状态后显式调用 SplashScreen.hide()。

请注意，由于您没有对 SplashScreen.hide() 返回的承诺执行任何操作，因此没有必要使用 await.

调用它

我应该在 setState 之后或在 useEffect() 的依赖数组中立即调用 returns 承诺的函数

Should I call a function that returns a promise immediately after setState or in the dependency array of useEffect()

asynchronous

async-await

reactjs

react-hooks