Ioni c реагировать на компонент без перерисовки при изменении состояния (Хуки), если компонент перенаправлен из / - PullRequest
Новая
       102

Ioni c реагировать на компонент без перерисовки при изменении состояния (Хуки), если компонент перенаправлен из /

0 голосов
/ 21 июня 2020

Я создаю приложение Android Ioni c 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>

    );
}

, когда пользователь нажимает / или после login, основной компонент перенаправляется на /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 но мне это тоже не помогло.

...