Загрузчик в условных утверждениях не отображается после I навигации или новых вызовов API в NextJs ⇐ Javascript

[Anonymous]

У меня был призыв к API для продуктов Fetch для WishList и CART, однако, поскольку оба оба имеют одинаковый пользовательский интерфейс, который я решил сделать в одностраничном компоненте, и, на первый взгляд, погрузчик отображается, но после того, как я навигационный погрузчик не показывается, а заголовок и продукт - это различные компоненты < /p>
здесь я делюсь кодом: < /p>
"< /p> < /p>

import { useParams } from "next/navigation";
import axios from "axios";
import Image from "next/image";
import { CircularProgress } from "@mui/material";
экспорт функции по умолчанию viewresouce () {< /p>
const {resource} = useParams (); < /p>
const [iscart, setiscart] = usEState (false); < /p>
const [resourcesdata, setResourcesdata); useState([]);
const [isLoading, setIsLoading] = useState(true);
const [dataFind, setDataFind] = useState(false);
useEffect(() => {

Код: Выделить всё

if (!resource) {

return;

}

if (resource === "cart") {

setIsCart(true);

return;

}

setIsCart(false);
< /code>
}, [resource]); < /p>
useEffect (() => {< /p>
if (!resource) {

setIsLoading(false);

setDataFind(false);

setResourcesData([]);

return;

}

setIsLoading(true);

setDataFind(false);

setResourcesData([]);

const abortController = new AbortController();

async function getResource() {

try {

const res = await axios.get(

`/api/client/manage?resource=${resource}`,

{ signal: abortController.signal }

);

setResourcesData(res.data.data || []);

} catch (e) {

setResourcesData([]);

} finally {

setIsLoading(false);

setDataFind(true);

}

}

getResource();

return () => {

abortController.abort();

};
< /code>
}, [resource]); < /p>
if (isloading &&! datafind) {< /p>
return (

className="d-flex justify-content-center align-items-center"

style={{ height: "50vh" }}

>



);
< /code>
} < /p>
if (datafind &&! isloading && resourcesdata.length 
return (

{isCart && (



)}

{!isCart && (



)}

No {isCart ? "Cart" : "Wishlist"} Items Found

);
< /code>
} < /p>
if (datafind &&! isloading && resourcesdata.length> 0 && iscart) {< /p>
return (

Your Cart Items

);
< /code>
} < /p>
if (datafind &&! isloading && resourcesdata.length> 0 &&! iscart) {< /p>
return (

Your Wishlist Items

);

}
return null;
}

Подробнее здесь: https://stackoverflow.com/questions/797 ... new-api-ca