reactjs - 登录后如何在离子反应应用程序中更新侧边菜单项列表

问题描述

我正在使用离子反应创建一个移动应用程序并使用“离子启动--sidemenu”选项。这是我的 App.tsx

<IonApp>
      <IonReactRouter>
        <IonSplitPane contentId="main">
          <Menu isLogged={isLoggedIn} userType={userType} logoutFunc={logout} />
          <IonRouterOutlet id="main">
            <Route path="/user/auth" render={(props) => isLoggedIn ? <Forum {...props} isLoggedIn={isLoggedIn} /> : <AuthHome {...props} />} exact />
            <Route path="/user/register" render={(props) => isLoggedIn ? <Forum {...props} isLoggedIn={isLoggedIn} /> : <Register {...props} />} exact />
            <Route path="/user/register-as-owner" render={(props) => isLoggedIn ? <Forum {...props} isLoggedIn={isLoggedIn} /> : <RegisterAsOwner {...props} />} exact />
            <Route path="/user/login" render={(props) => isLoggedIn ? <Forum {...props} isLoggedIn={isLoggedIn} /> : <Login {...props} />} exact />
            <Route path="/user/profile" render={(props) => <Profile {...props} />} exact />
            <Route path="/user/inbox" render={(props) => <Inbox />} exact />
            <Route path="/user/inbox/:id" render={(props) => <Mail {...props} />} exact />
            <Route path="/user/profile/my-notification" component={MyNotification} exact />
            <Route path='/user/create-team' render={(props) => <CreateTeam {...props} />} exact />
            <Route path='/list-teams' render={props => <TeamListing {...props} />} exact />
            <Route path='/team/:id' render={props => <Team {...props} />} exact />
            <Route path="/forum" component={Forum} exact />
            <Route path="/game" render={(props) => <CreateGameNotification {...props} />} exact />
            <Route path="/game/:id" render={(props) => <GameInfo {...props} />} exact />
            <Route path="/game/comments/:id" render={(props) => <GameComments {...props} />} exact />
            <Redirect from="/" to={isLoggedIn ? "/forum" : "/user/auth"} exact />
            <Redirect from="/user/logout" to="/user/auth" exact />
          </IonRouterOutlet>
        </IonSplitPane>
      </IonReactRouter>
    </IonApp>

这是 Menu.tsx 组件

const getMenuItem = (appPage: AppPage, index: number) => {
    return (
      <IonMenuToggle key={appPage + "-" + index} autoHide={false}>
        <IonItem className={location.pathname === appPage.url ? 'selected' : ''} routerLink={appPage.url} routerDirection="none" lines="none" detail={false}>
          <IonIcon slot="start" ios={appPage.iosIcon} md={appPage.mdIcon} />
          <IonLabel>{appPage.title}</IonLabel>
        </IonItem>
      </IonMenuToggle>
    );
  };

  return (
    <IonMenu contentId="main" type="overlay">
      <IonContent>
        <IonList id="inbox-list">
          <IonListHeader>Menu</IonListHeader>
          {props.isLogged
            ? props.userType == "user"
              ? menuItem.UserMenuPage.map((page: AppPage, i) => getMenuItem(page, i))
              : props.userType == "owner"
                ? menuItem.OwnerMenuPage.map((page: AppPage, i) => getMenuItem(page, i))
                : props.userType == "admin"
                  ? menuItem.AdminMenuPage.map((page: AppPage, i) => getMenuItem(page, i))
                  : <></>
            : menuItem.UnauthenticatedUserMenuPage.map((page: AppPage, i) => getMenuItem(page, i))}
          <IonMenuToggle autoHide={false}>
            <IonItem onClick={e => props.logoutFunc(history)} detail={false}>
              <IonIcon slot="start" ios={personSharp} md={personSharp} />
              <IonLabel>Dil nga profili</IonLabel>
            </IonItem>
          </IonMenuToggle>
        </IonList>
      </IonContent>
    </IonMenu>
  );

当应用程序打开时，它会检查用户是否已经登录，如果没有，它会重定向到登录。登录后，用户被重定向到论坛页面。


 const [gameList, setGameList] = useState<Game[]>();
    const [unreadMails, setUnreadMails] = useState<number>(0);

    useIonViewWillEnter(() => {
        fetch(env.game_api)
            .then(res => res.json()
                .then(data => {
                    setGameList(data);
                }))
            .catch(err => {
                console.log(err);
            });

        authservice.getUserIdFromStorage()
        .then(id => {
            fetch(env.mail_api + "/user/unread/" + id.value)
            .then(resp => resp.json())
            .then(res => setUnreadMails(res))
            .catch(err => console.log(err));
        });
    });

<IonPage>
            <IonHeader>
                <IonToolbar>
                    <IonButtons slot="start">
                        <IonMenuButton />
                    </IonButtons>
                    <IonTitle color="success">Njoftime</IonTitle>
                    <IonButton onClick={e => props.history.push("/user/inbox")} slot="end" fill="clear">
                        <IonIcon icon={mailOutline} size="large"></IonIcon>
                        {unreadMails > 0 && <IonLabel>{unreadMails}</IonLabel>}
                    </IonButton>
                </IonToolbar>
            </IonHeader>
            <IonContent fullscreen>
                {gameList ? gameList.map((game, i) => {
                    return (
                        <IonCard key={game.title + "-" + i} >
                            <IonCardHeader>
                                <IonCardTitle>
                                    <IonRouterLink href={"/user/profile?user=" + game.posted_by}>
                                        <IonLabel>{game.posted_by_name}</IonLabel>
                                    </IonRouterLink>
                                </IonCardTitle>
                                <IonCardSubtitle>Shkodra Fc</IonCardSubtitle>
                            </IonCardHeader>
                            <IonItem routerLink={"/game/" + game._id} >
                                <IonIcon icon={footballOutline} slot="start" />
                                <IonLabel>Info Mbi ndeshjen</IonLabel>
                            </IonItem>
                            <IonItem lines="none" routerLink={"/game/comments/" + game._id}>
                                <IonIcon icon={chatboxOutline} slot="start" />
                                <IonLabel>Komente te Tjera</IonLabel>
                            </IonItem>
                            
                        </IonCard>
                    )
                }) : <> </>}
            </IonContent>
</IonPage>

根据用户角色，我想显示不同的侧边菜单项，但在用户成功登录后侧边菜单项不会更新。我必须以什么方式更改我的代码才能使其工作？提前致谢！

标签： reactjsionic-frameworkreact-propsreact-stateside-menu

reactjs - 登录后如何在离子反应应用程序中更新侧边菜单项列表

问题描述

解决方案

推荐阅读