在路由上重新渲染 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>  

在我的组件统计信息中，我使用 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