Reactjs 反应部分重序树

所以我有一个

appbar

和一个

drawer

。像这样：

export default function AppRouter() {
  //Drawer mobile toggle function
  const [drawerMobileOpen, setDrawerMobileOpen] = useState(false);
  const handleDrawerToggle = function() {
    setDrawerMobileOpen(!drawerMobileOpen);
  };

  return (
    <Router>
      <Authentication loginPage={<Login />}>
        <StyledResponsiveDrawerWrapper>
          <Drawer open={drawerMobileOpen} drawerToggle={handleDrawerToggle}>
            <DrawerContent />
          </Drawer>
          <StyledContent>
            <AppBar position="fixed" drawerToggle={handleDrawerToggle} />
            <StyledMain>
              <Switch>
                <Route path="/dashboard/" component={suspensePage(Dashboard)} />
                <Route path="/administrator/" component={suspensePage(Administrator)} />
              </Switch>
            </StyledMain>
          </StyledContent>
        </StyledResponsiveDrawerWrapper>
      </Authentication>
    </Router>
  );
}

导出默认函数AppRouter（）{
//抽屉移动切换功能
const[drawerMobileOpen，setDrawerMobileOpen]=使用状态（false）；
const handleDrawerToggle=函数（）{
setDrawerMobileOpen（！drawerMobileOpen）；
};
返回(
);
}

在

路径中

我有我的页面。现在发生的是，如果我单击

appBar

上的菜单按钮，

useState

将被更新（

handleDrawerToggle

），并将

drawerMobileOpen

设置为

true

或

false

那很好用。但由于此组件中的状态发生更改，因此会发生重新加载。重新加载程序将再次加载路由中的当前页面。这个页面有一个api调用，所以每次我切换抽屉时，都会生成一个apicall

---

如何防止当抽屉的状态发生更改时重新打开页面。抽屉当然应该重新打开。如何解决此问题？

问题在于，您在渲染方法中使用了一个HOC，该方法每次都会创建组件的新实例。您应该从功能组件的外部创建组件实例

const SuspenseDashboard = suspensePage(Dashboard)
const SuspenseAdministrator = suspensePage(Administrator)
export default function AppRouter() {
  //Drawer mobile toggle function
  const [drawerMobileOpen, setDrawerMobileOpen] = useState(false);
  const handleDrawerToggle = function() {
    setDrawerMobileOpen(!drawerMobileOpen);
  };

  return (
    <Router>
      <Authentication loginPage={<Login />}>
        <StyledResponsiveDrawerWrapper>
          <Drawer open={drawerMobileOpen} drawerToggle={handleDrawerToggle}>
            <DrawerContent />
          </Drawer>
          <StyledContent>
            <AppBar position="fixed" drawerToggle={handleDrawerToggle} />
            <StyledMain>
              <Switch>
                <Route path="/dashboard/" component={SuspenseDashboard} />
                <Route path="/administrator/" component={SuspenseAdministrator} />
              </Switch>
            </StyledMain>
          </StyledContent>
        </StyledResponsiveDrawerWrapper>
      </Authentication>
    </Router>
  );
}

const suspendedashboard=suspendepage（仪表板）
const suspendeadministrator=suspendepage（管理员）
导出默认函数AppRouter（）{
//抽屉移动切换功能
const[drawerMobileOpen，setDrawerMobileOpen]=使用状态（false）；
const handleDrawerToggle=函数（）{
setDrawerMobileOpen（！drawerMobileOpen）；
};
返回(
);
}

谢谢！这么简单。。。我明白为什么会这样。谢谢你。