我正在构建一个 Android Ionic React 应用程序，即使在网上尝试了多种解决方案后，我也遇到了下面的问题，为长篇文章道歉。托管在https://stackblitz.com/edit/ionic-react-tabs-gvcbpq中的源代码
我有一个主组件，它定义了几条路线和 IonTab，
const MainMenu: React.FC = () => {
return(
<IonPage>
<IonReactRouter>
<IonTabs>
<IonRouterOutlet>
<Route path="/account" render={ () => (<Account orders={orders}/>) } exact={true} />
<Route path="/order" render={ () => (<Order orders={orders}/>) } exact={true} />
<Route path="/history" render={ () => (<History orders={orders}/>) } exact={true} />
<Route path="/logout" render={ () => (<LogOut/>) } exact={true} />
<Route path="/pending" render={ () => (<Pending orders={orders}/>) } exact={true} />
<Route path="/" render={ () => (<Order orders={orders}/>) } exact={true} />
</IonRouterOutlet>
<IonTabBar color={"light"} slot="bottom" id="appTabBar">
<IonTabButton tab="account" href="/account">
<IonIcon size="large" icon={personCircleOutline} id="tabButton"/>
<IonLabel class="menuBottomText">Profile</IonLabel>
</IonTabButton>
<IonTabButton tab="order" href="/order">
<IonIcon size="large" icon={bicycle}/>
<IonLabel class="menuBottomText">Orders</IonLabel>
</IonTabButton>
<IonTabButton tab="pending" href="/pending">
<IonBadge hidden={pendingOrders === 0} id="pendingBadge" color="danger">{pendingOrders}</IonBadge>
<IonIcon size="large" icon={hourglassOutline}/>
<IonLabel class="menuBottomText">Pending</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
</IonReactRouter>
</IonPage>
);
}
当用户点击/或登录后，主要组件重定向到 /order并且我在这里遇到重新渲染问题，我希望组件在更新showModel或currentIndex更新时重新渲染，但它不会发生。不幸的是，如果我手动刷新相应href的例如htpp://localhost:8080/order运行良好，但当控制从/它重新路由时不起作用。
const Order: React.FC<{orders?:OrderInfo[]}> = ({orders}) => {
const[showModel, setShowModel] = useState(false);
const[currentIdx, setCurrentIdx] = useState(0);
function handleButtonPress(index:number) {
setCurrentIdx(index);
setShowModel(true);
}
return (
<IonPage>
<IonHeader translucent>
<IonToolbar color="light" mode="md">
<IonTitle>Order List</IonTitle>
<IonButtons slot="start">
<IonBackButton defaultHref="order" color="dark"/>
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent>
{
<IonModal isOpen={showModel} onDidDismiss={() => setShowModel(false)}>
<Confirm title="Complete Order" order={orders?.[currentIdx]} onClose={() => setShowModel(false)} />
</IonModal>
}
<div id={"orderBackground"}>
{
orders?.filter(order => order.status === ORDER_STATUS.ACCEPTED )
.map((order, index) => {
return(
<div id="orderGrid" key={order.orderId}>
<IonGrid>
<IonRow>
<IonCol size="1.5" class="ion-align-self-start">
<div id="orderIcon">
<IonIcon color = "success" size="large" icon={documentTextOutline}/>
</div>
</IonCol>
<IonRow id="finishOrderButton">
<IonButton fill="outline" size="small" onClick={() => handleButtonPress(index)} color={"success"}>Finish Order</IonButton>
</IonRow>
</IonGrid>
</div>
);
})
}
</div>
</IonContent>
</IonPage>
);
PS：我尝试过使用useeffect，history.push但这对我也没有帮助。