我是否应该调用一个函数，该函数在setState之后或在useEffect()的依赖数组中立即返回承诺

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()返回一个承诺。哪条路更好，为什么？

Answer 1

这取决于您是否想在数据设置之后调用SplashScreen.hide()。在第一种情况下，不能保证调用将在数据设置之后进行，因为setState工作异步。但是，在第二种情况下，在状态更新后显式调用SplashScreen.hide()。

注意，由于您没有使用SplashScreen.hide()返回的承诺做任何事情，所以没有必要使用await来调用它。