时间戳

首页 > 解决方案 > React Hook 不更新条件组件

reactjs - React Hook 不更新条件组件

问题描述

感谢您抽出宝贵的时间，如果这个问题已经被问过，我很抱歉，但老实说，我没有找到任何解决方案。我是 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 它工作正常！！isLoading 也在 HomeContainer 内部用于渲染字符串并且它正在正确更新！似乎条件语句中的 isLoading 不会重新渲染组件，但仅当从子级（Home）调用 setIsLoading 时才重新渲染。

感谢大家的支持！

标签： reactjsreact-hooksuse-state

解决方案

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

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

推荐阅读