React Hook 不更新条件组件

Question

感谢您抽出宝贵时间，如果有人问过这个问题，我深表歉意，但老实说，我没有找到任何解决方案。我是 React 的新手，我正在尝试创建一个网站组合，我完成了我的项目，但现在我正在尝试在加载视频背景时实现 Spinner 加载器。我将简化代码只是为了更好地解释问题。这是我的类

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。我现在真的不知道为什么。如果我尝试在带有计时器的 App 中放置一个 useEffect 并尝试更新 isLoading，它工作正常！！在 HomeContainer 内部也使用 isLoading 来渲染一个 String 并且它正在正确更新！似乎条件语句中的 isLoading 不会重新渲染组件，但只有在从子 (Home) 调用 setIsLoading 时才会重新渲染组件。

感谢大家的支持！

Answer 1

因为在这种情况下有一个无限循环：isLoading === true -> Home 不渲染 -> onLoadStart 不触发 -> 没有机会设置 isLoading false -> ...

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

React Hook 不更新条件组件

React Hook not update conditional component

reactjs

react-hooks

use-state