如果组件从 / 重定向，离子反应组件不会重新渲染（挂钩）state 更改

Question

我正在构建一个 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但这对我也没有帮助。

Answer 1

这是因为您不使用本机离子生命周期事件。 https://ionicframework.com/docs/react/lifecycle