有没有办法延迟父组件的渲染，直到其所有子组件完全准备好渲染为止？

Question

我试图延迟父组件的渲染，直到其所有子组件完全准备好渲染。基本上我想要做的是在子组件尚未准备好时在父组件上显示加载指示器。一旦子组件完全准备好渲染，加载指示器就会消失，父组件将与其子组件一起立即渲染，以获得流畅的用户体验。当前发生的情况是，父组件在未准备好渲染时显示加载指示器，然后在准备好渲染时加载指示器消失，但它不会等到子组件准备好，因此导致一些延迟，不是很顺利。

为了解决这个问题，我使用 Zustand 将加载状态从子组件提升到父组件。然后，我根据子组件中所有必要数据的准备情况动态渲染父组件。然而，这却产生了一个意想不到的问题。我的父组件只是无限期地显示加载指示器，并且似乎没有将正确的状态提升到父组件。

Answer 1

这就是你如何组织状态

const News = () => {
  const [loadingSportNews, setLoadingSportNews] = useState(true)
  const [loadingTechNews, setLoadingTechNews] = useState(true)
  const [dataSportNews, setDataSportNews] = useState(null)
  const [dataTechNews, setDataTechNews] = useState(null)

  useEffect(() => {
    const fetchSportNews = async () => {
      const data = await foo()
      setLoadingSportNews(false)
      setDataSportNews(data)
    }
    const fetchTechNews = async () => {
      const data = await foo2()
      setLoadingTechNews(false)
      setDataTechNews(data)
    }
    fetchSportNews()
    fetchTechNews()
  }, [])

  const isLoadingNews = loadingSportNews || loadingTechNews
  if (isLoadingNews) {
    return 'Loading...'
  }

  return (
    <>
      <SportNews data={dataSportNews}></SportNews>
      <TechNews data={dataTechNews}></TechNews>
    </>
  )
}