離子-Routerlink不觸發生命周期事件-有解無憂

我正在努力解決與 RouterLink 一起使用的 Ionic 生命周期事件。

我在 JSON 檔案中有我的應用程式資料，該檔案在加載頁面時使用 url 引數呈現每個專案。我需要按鈕轉到下一個或上一個專案并重繪頁面內容，即：

我在專案 1 (/lecture/item1) => 單擊下一步 => routerLink(/lecture/item2)
我在 Item 1 (/lecture/item1) => click prev => routerLink(/lecture/item0) 這意味著每次我移動到一個頁面時，我需要從 url ( /lecture/:param)獲取引數并更新頁面資料。我面臨的問題是 RouterLink 沒有觸發任何頁面離開生命周期，所以我的狀態不會改變，而且我無法清理狀態（我可以通過 href 引數來完成，但整個應用程式是重繪）。我發現了類似的執行緒，但其中一些已經過時/仍然打開： Routerlink bug github。

有什么方法/解決方法可以重新加載組件并更新傳遞不同引數的狀態？

我已經嘗試使用 useHistory 鉤子、 history.replace (Source)和 routerDirection="back" 但它們都沒有觸發離子頁面離開鉤子。我也嘗試用 Switch 替換 IonRouterOutlet 但這意味著沒有一些重要的離子特性。

先感謝您！！

摘錄一段代碼供參考：

講座.json（物件陣列）

{
    "list" : [ {}  ]
}

應用程式.tsx

<IonApp>      
      <IonReactRouter>
        <IonSplitPane contentId="main">
          <Menu />
          
          <IonRouterOutlet id="main">
            <Route path="/" exact>
              <Redirect to="/lectures" />
            </Route>
            <Route path="/lectures" exact component={Home}></Route>
            <Route path="/lectures/:name" exact>
              <Lecture />
            </Route>
          </IonRouterOutlet>
        </IonSplitPane>
      </IonReactRouter>
    </IonApp>

講座.tsx


const Page: React.FC = () => {

  const [lecturaIndex, setLecturaIndex] = useState<number>(0);
  const [btnLinks, setBtnLinks] = useState<{next?: string , prev?: string }>({});

 useIonViewDidEnter(()=>{
    // Gets page params and use them to find current item in data json
    let current;
    current = lectures.list.find(lecture => lecture.title === match.params.name); 
    setLecturaIndex(current.id);
   // Set next and prev buttons url for routerLink
    setBtnLinks({
      next: current.id < 13 ? `/lectures/${languages.list[current.id 1].title}` : '/lectures', 
      prev: current.id > 0 ? `/lectures/${languages.list[current.id-1].title}` : '/lectures'
    });
   // function that Enables/disables navigation buttons depending on current index. ie: if i=0; can't go back
    indexCheck(current);
  })

// THESE ARE NEVER TRIGGERED WHEN GOING TO NEXT PARAM (/lectures/:param)
useIonViewWillLeave(()=>{
    console.log('will leave lecture');
  })

  useIonViewDidLeave(()=>{
    console.log('did leave lecture');
  })
  return(
    <IonPage>
      <IonContent>        
        <IonButton          
          disabled={nextBtnDisable}           
          routerLink={btnLinks.next}
          routerDirection="back"      
          >
        NEXT
        </IonButton>
      </IonContent>
    </IonPage>
  )
}

uj5u.com熱心網友回復：

通常useEffect，依賴于路由匹配引數足以產生副作用，例如重新獲取相關資料。

這里描述的 ionicuseIonViewWillEnter和useIonViewDidEnterhooks基本上是安裝生命周期鉤子，如果您已經在視圖中并且只更改 URL 路徑引數，它們似乎不會觸發。將邏輯移動到一個鉤子，當組件掛載和任何指定的依賴項更新時呼叫該鉤子。useEffect

例子：

useEffect(() => {
  // business logic to handle name param changes
}, [match.params.name]);

如果匹配引數從未定義，那么您可以使用 Optional Chaining 運算子來防止空/未定義物件訪問。

useEffect(() => {
  // business logic to handle name param changes
}, [match?.params?.name]);

更新

看來useIonViewWillEnter和useIonViewDidEnter鉤也還需要依賴陣列和內部實行useEffect掛鉤。（之前應該多挖一點）

來源

export const useIonViewWillEnter = (callback: LifeCycleCallback, deps: any[] = []) => {
  const context = useContext(IonLifeCycleContext);
  const id = useRef<number | undefined>();
  id.current = id.current || Math.floor(Math.random() * 1000000);
  useEffect(() => {
    callback.id = id.current!;
    context.onIonViewWillEnter(callback);
  }, deps);
};

export const useIonViewDidEnter = (callback: LifeCycleCallback, deps: any[] = []) => {
  const context = useContext(IonLifeCycleContext);
  const id = useRef<number | undefined>();
  id.current = id.current || Math.floor(Math.random() * 1000000);
  useEffect(() => {
    callback.id = id.current!;
    context.onIonViewDidEnter(callback);
  }, deps);
};

該useEffect掛鉤是沒有必要的，然后。

useIonViewDidEnter(() => {
  // business logic to handle name param changes
}, [match?.params?.name]);

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/373200.html

標籤：反应离子框架反应路由器-dom 离子反应

上一篇：通過片段獲取父活動

下一篇：如何在HTML中沒有（單擊）按鈕的情況下執行打字稿角度函式？