在路线上重新渲染 Ionic React（不想重新加载数据）

Question

我正在尝试使用 Ionic React 构建应用程序。我的路由器有问题。

App.tsx

<IonRouterOutlet>
         <Route path="/stats" render={() => <Stats/>} exact={true} />
         <Route path="/orders" component={Orders} exact={true} />
         <Route path="/" render={() => <Redirect to="/stats" />} exact={true} /></IonRouterOutlet>  

在我的组件 Stats 中，我使用 useEffect 从 API 加载数据

 useEffect(() => {
   OrdersService.getOrders().then(resultat => {
     setDataOrders(resultat);
    });
     return function cleanup() {
       // Clean the data

     }


  }, []);

如果我转到我的组件订单并返回统计信息，请做出反应，不要从 API 重新加载数据。 您有任何解决方案来强制重新加载吗？

提前致谢。

Answer 1

Ionic 的工作方式与您的预期不同，即使尚未输入路线，也会呈现路线。当您导航到新路线时，不会调用 useEffect 的清理功能。这是设计使然，因此当您在页面之间导航时，路线已经呈现并且很好。

您要使用的是useIonViewWillEnter钩子，它将在即将进入路由时调用。

import React, { useState } from "react";
import { useIonViewWillEnter } from "@ionic/react";

export const DataOrdersView = () => {
  const [dataOrders, setDataOrders] = useState([]);

  useIonViewWillEnter(() => {
    OrdersService.getOrders().then((resultat) => {
      setDataOrders(resultat);
    });
  });

  return <div>Your View</div>;
};

你可以在这里阅读更多， https://ionicframework.com/docs/react/lifecycle