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

Question

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

应用程序.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

     }


  }, []);

如果我转到我的组件 Orders 并返回到 stats，react 不会从 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