我正在嘗試找員工，這就是我想要做的事情useEffect
function AdminEmployees() {
const navigate = useNavigate();
const dispatch = useDispatch();
// fetching employees
const { adminEmployees, loading } = useSelector(
(state) => state.adminFetchEmployeeReducer
);
useEffect(() => {
dispatch(adminFetchEmployeeAction());
if (adminEmployees === "unAuthorized") {
navigate("/auth/true/false");
}
}, [adminEmployees, navigate,dispatch]);
console.log("Here i am running infinie loop");
console.log(adminEmployees);
return (
<>
{loading ? (
<Loader></Loader>
) : adminEmployees === "no employees" ? (
<h1>No Employees</h1>
) : (
<>
{adminEmployees &&
adminEmployees.map((employee) => {
return (
<div className="admin__employee__container" key={employee.id}>
<AdminSingleEmployee
employee={employee}
></AdminSingleEmployee>
</div>
);
})}
</>
)}
</>
);
}
在這里，我想實作 2 個目標：
- 獲取 adminEmployees
- if (adminEmployees==='unAuthorized') 然后去 loginPage
但是當在代碼中這樣做時，它會創建無限回圈。
如何實作所需的功能？
uj5u.com熱心網友回復：
易臟路徑：一分為useEffect二
useEffect(() => {
if (adminEmployees === "unAuthorized") {
navigate("/auth/true/false");
}
}, [adminEmployees, navigate]);
useEffect(() => {
dispatch(adminFetchEmployeeAction());
}, [dispatch]);
更好的方法：在reducer或action creator中處理這種情況以在商店中翻轉標志，然后在組件中使用它：
const { shouldNavigate } = useSelector(state => state.someSlice);
useEffect(() => {
if(shouldNavigate) {
// flipping flag back
dispatch(onAlreadyNavigated()));
navigate("/yourPath...");
},
[navigate, dispatch, shouldNavigate]
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/469073.html
標籤：javascript 反应 使用效果
上一篇：document.getElementById().value-覆寫或知道何時訪問
下一篇：訪問陣列中的JSON值