在路由上重新渲染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中，我使用Effect从API中加载数据。

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

     }


  }, []);

如果我去我的组件Orders和回到统计，反应不重新加载数据从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.comdocsreactlifecycle。