У меня был призыв к API для продуктов Fetch Fort LizeList и Cart, однако, поскольку оба оба имеют одинаковый пользовательский интерфейс, который я решил сделать в одностраничном компоненте, и, на первый взгляд, погрузчик показывает, но после того, как я навигационный загрузчик не показывает, а заголовок и продукт - это разные компоненты.
Погрузчик не показывает, когда я навигации, когда я не смогу получить данные. /> "use client";
import { useState, useEffect } from "react";
import { useParams } from "next/navigation";
import axios from "axios";
import Image from "next/image";
import { CircularProgress } from "@mui/material";
export default function ViewResouce() {
const { resource } = useParams();
const [isCart, setIsCart] = useState(false);
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);
}, [resource]);
useEffect(() => {
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();
};
}, [resource]);
if (isLoading && !dataFind) {
return (
className="d-flex justify-content-center align-items-center"
style={{ height: "50vh" }}
>
);
}
if (dataFind && !isLoading && resourcesData.length 0 && isCart) {
return (
Your Cart Items
);
}
if (dataFind && !isLoading && resourcesData.length > 0 && !isCart) {
return (
Your Wishlist Items
);
}
return null;
}
Подробнее здесь: https://stackoverflow.com/questions/797 ... king-new-a
