React Hook 不更新条件组件答案

【问题标题】：React Hook not update conditional componentReact Hook 不更新条件组件
【发布时间】：2021-03-03 20:56:13
【问题描述】：

感谢您抽出宝贵时间，如果这个问题已经被问过，我们很抱歉，但老实说，我没有找到任何解决方案。我是 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 时才重新渲染。

感谢大家的支持！

【问题讨论】：

当Loading 为真时，您永远不会渲染Home，因此它永远无法通过HeroSection 将其设置为false
感谢我尝试根据 isLoading 值设置不透明度

标签： reactjs react-hooks use-state

【解决方案1】：

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

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

【讨论】：

天哪，我现在没有！所以显然它不会工作！谢谢，我很感激，我尝试根据 isLoading 值设置不透明度！！