React Hook未更新条件组件

Question

感谢您的时间，如果这个问题已经被问到了，很抱歉，但老实说，我没有找到任何解决方案。我是React上的新手，我正在尝试创建一个网站组合，我完成了我的项目，但现在我正在尝试实现一个旋转加载器，同时我的视频背景正在加载。为了更好地解释这个问题，我将简化代码。这是我的课程

function App() {

  const [isLoading, setIsLoading] = useState(true);

  return isLoading ? (
      <LoaderContainer>
          <Loader type="Puff" color="rgb(241, 113, 27)" height={100} width={100} />
      </LoaderContainer>
  ) : (
      <Router>
         <Home isLoading={isLoading} setIsLoading={setIsLoading} />
      </Router>
  );
  }

  export default App;

  //HOME functional component-------------------

  const Home = ({ isLoading, setIsLoading }) => {

  return (
    <>
      //...other components
      <HeroSection isLoading={isLoading} setIsLoading={setIsLoading} />
      //...other components
    </>
  );
  };

  export default Home;

现在.。在HeroSection中，有一个视频中有这个选项：“onLoadStart={() => setIsLoading(false)}”这个选项可以正常工作，但不适用于使用路由器更新LoaderContainer。我现在真的不知道为什么。如果我试着把一个带计时器的useEffect放入应用程序中，并尝试更新isLoading，它工作得很好！此外，在HomeContainer内部使用isLoading来呈现字符串，并且它正在正确更新！似乎条件语句中的isLoading不会重新呈现组件，但仅当从子(主页)调用setIsLoading时才会重新呈现组件。

感谢所有人的支持！

Answer 1

因为在这种情况下有一个无限循环: isLoading === true -> Home not render -> onLoadStart not trigger ->没有机会设置isLoading false -> ...

即使在加载过程中，您也无法避免呈现<HeroSection/>，因为HeroSection负责终止加载。因此，解决方案将是控制不透明度或堆叠上下文，使<Home/>在开始时不可见，而不是完全不呈现