reactjs - 在路由上重新渲染 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即将进入路线时将调用的钩子(Hook)。

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