我的路線定義如下：
<Route path={`list`} element={<ListPage />}>
<Route path={`sidePanel1`} element={<SidePanel1 />} />
<Route path={`sidePanel2`} element={<SidePanel2 />} />
<Route index element={<Navigate to={`sidePanel1`} replace />}/>
</Route>
因此，當/list鍵入時，它將被重定向到/list/sidePanel1.
在ListPage組件中我有這個：
const ListPage = (): JSX.Element => {
const [data, setData] = useState<ListDto[]>([]);
const location = useLocation();
useEffect(() => {
getList()
.then(response => {
setData(response.data);
})
.catch(() => {
setIsLoading(false);
});
}, [location]);
return (
<ListTable data={data}/>
<SidePanelStyles>
<Outlet />
</SidePanelStyles>
);
};
所以，我的問題是，每當我鍵入/list/useEffect 時，由于位置已更改，它將觸發，然后在重定向到/list/sidePanel1.
我希望它僅在我被重定向后觸發。
我該如何解決這個問題？
uj5u.com熱心網友回復：
無需重定向和渲染兩次，只需SidePanel1在索引路由上渲染組件即可。
例子：
<Route path="list" element={<ListPage />}>
<Route index element={<SidePanel1 />} />
<Route path="sidePanel1" element={<SidePanel1 />} />
<Route path="sidePanel2" element={<SidePanel2 />} />
</Route>
uj5u.com熱心網友回復：
一種僅對快速更改序列中的最后一個更改做出反應的通用解決方案是使用“去抖動”。
即效果被觸發和getList被呼叫之間的延遲，這樣如果在延遲完成之前再次觸發效果，則掛起的呼叫將被取消。
function useDebouncedEffect(delay, effect, triggerParams) {
useEffect(() => {
const timeout = setTimeout(f, delay)
return () => clearTimeout(timeout)
}, triggerParams)
}
useDebouncedEffect(300, () => {
getList()
.then(response => {
setData(response.data);
})
.catch(() => {
setIsLoading(false);
});
}, [location]);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/484099.html
標籤：javascript 反应 反应路由器
上一篇：回傳Promise的函式，這是Promise解決后要使用的一組選項
下一篇：對于XofY回圈計數器