使用 React Hooks 實現時間延遲

Question

我想知道如何在 React 功能組件中實現時間延遲。 偽代碼如下

const staring_function = () => {
  return(
    //renders components
  )
}
const main_function = () => {
  return(
    //renders components
  )
}

我想運行starting_function 3秒以在加載時在屏幕上呈現一些文本，然后main_function運行以替換starting_function的內容。 例如，頁面顯示文本“正在加載...”幾秒鍾，然后顯示內容。

我已經為此工作了幾天，但仍然無法解決。 我知道它與 useEffect 掛鈎有關。 如果有人可以幫助我，那將會很有幫助。 謝謝

Answer 1

你不需要useEffect鈎子。 試試下面的代碼：

const [ loading, setLoading ] = useState(true)

setTimeout(() => {
  console.log('now')
  setLoading(false)
}, 3000)

if (loading) {
  return (
    <div>LOADING...</div>
  )
}

return (
  <div>content</div>
)