|
@@ -59,7 +59,7 @@ export default function ProductListing({
|
|
|
|
|
|
|
|
const [products, setProducts] = useState(initialProducts);
|
|
const [products, setProducts] = useState(initialProducts);
|
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
- const [pageInfo, setPageInfo] = useState(initialPageInfo);
|
|
|
|
|
|
|
+ const [, setPageInfo] = useState(initialPageInfo);
|
|
|
const [_total, setTotal] = useState(initialTotal);
|
|
const [_total, setTotal] = useState(initialTotal);
|
|
|
const currentPage = query.page ?? 1;
|
|
const currentPage = query.page ?? 1;
|
|
|
const perPage = 8;
|
|
const perPage = 8;
|
|
@@ -67,6 +67,7 @@ export default function ProductListing({
|
|
|
const firstRender = useRef(true);
|
|
const firstRender = useRef(true);
|
|
|
const apolloClient = useApolloClient();
|
|
const apolloClient = useApolloClient();
|
|
|
const [pageInputVal, setPageInputVal] = useState(String(currentPage));
|
|
const [pageInputVal, setPageInputVal] = useState(String(currentPage));
|
|
|
|
|
+ const queryRef = useRef(query);
|
|
|
const fetchProducts = async (currentQuery: QueryState) => {
|
|
const fetchProducts = async (currentQuery: QueryState) => {
|
|
|
if (isLoading) return; // ✅ 防重复请求:请求进行中直接返回
|
|
if (isLoading) return; // ✅ 防重复请求:请求进行中直接返回
|
|
|
try {
|
|
try {
|
|
@@ -100,9 +101,17 @@ export default function ProductListing({
|
|
|
setIsLoading(false); // ✅ finally:无论成功失败都关闭遮罩
|
|
setIsLoading(false); // ✅ finally:无论成功失败都关闭遮罩
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
-useEffect(() => {
|
|
|
|
|
- setPageInputVal(String(currentPage));
|
|
|
|
|
-}, [currentPage]);
|
|
|
|
|
|
|
+ useEffect(() => {
|
|
|
|
|
+ queryRef.current = query;
|
|
|
|
|
+ }, [query]);
|
|
|
|
|
+ useEffect(() => {
|
|
|
|
|
+ const nextVal = String(currentPage);
|
|
|
|
|
+ if (pageInputVal !== nextVal) {
|
|
|
|
|
+ queueMicrotask(() => {
|
|
|
|
|
+ setPageInputVal(nextVal);
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ }, [currentPage]);
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
|
if (firstRender.current) {
|
|
if (firstRender.current) {
|
|
|
firstRender.current = false;
|
|
firstRender.current = false;
|
|
@@ -157,25 +166,27 @@ useEffect(() => {
|
|
|
}
|
|
}
|
|
|
// 筛选排序回调
|
|
// 筛选排序回调
|
|
|
const handleFilterChange = useCallback((filters: Record<string, string>) => {
|
|
const handleFilterChange = useCallback((filters: Record<string, string>) => {
|
|
|
|
|
+ const latestQuery = queryRef.current;
|
|
|
//对比避免重复渲染导致分页初始化一直 为1
|
|
//对比避免重复渲染导致分页初始化一直 为1
|
|
|
- if (isFiltersEqual(filters, query.filters)) {
|
|
|
|
|
|
|
+ if (isFiltersEqual(filters, latestQuery.filters)) {
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
updateQuery({
|
|
updateQuery({
|
|
|
- ...query,
|
|
|
|
|
|
|
+ ...latestQuery,
|
|
|
filters,
|
|
filters,
|
|
|
page: 1,
|
|
page: 1,
|
|
|
});
|
|
});
|
|
|
- }, [query]);
|
|
|
|
|
|
|
+ }, []);
|
|
|
const handleSortChange = useCallback((sortValue:string, sortKey:string, reverse:boolean) => {
|
|
const handleSortChange = useCallback((sortValue:string, sortKey:string, reverse:boolean) => {
|
|
|
|
|
+ const latestQuery = queryRef.current;
|
|
|
updateQuery({
|
|
updateQuery({
|
|
|
- ...query,
|
|
|
|
|
|
|
+ ...latestQuery,
|
|
|
sortValue,
|
|
sortValue,
|
|
|
sortKey,
|
|
sortKey,
|
|
|
reverse,
|
|
reverse,
|
|
|
page: 1,
|
|
page: 1,
|
|
|
});
|
|
});
|
|
|
- }, [query]);
|
|
|
|
|
|
|
+ }, []);
|
|
|
// 分页逻辑
|
|
// 分页逻辑
|
|
|
function generatePageNumbers(current: number, total: number) {
|
|
function generatePageNumbers(current: number, total: number) {
|
|
|
const pages: number[] = [];
|
|
const pages: number[] = [];
|
|
@@ -232,7 +243,7 @@ useEffect(() => {
|
|
|
filters={query.filters}
|
|
filters={query.filters}
|
|
|
onChange={handleFilterChange}
|
|
onChange={handleFilterChange}
|
|
|
/>
|
|
/>
|
|
|
- <div>
|
|
|
|
|
|
|
+ <div className={isArray(products) && products.length > 0 ?"":"w-full"}>
|
|
|
<NewSortOrder
|
|
<NewSortOrder
|
|
|
sortOrders={newSortByFields}
|
|
sortOrders={newSortByFields}
|
|
|
title="Sort by"
|
|
title="Sort by"
|
|
@@ -316,11 +327,11 @@ useEffect(() => {
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
) : (
|
|
) : (
|
|
|
- <div className="px-4">
|
|
|
|
|
- <div className="flex h-40 items-center justify-center rounded-lg border border-dashed border-neutral-300">
|
|
|
|
|
- <p className="text-neutral-500">
|
|
|
|
|
|
|
+ <div className="w-full max-h-[870px]">
|
|
|
|
|
+ <div className="flex w-full h-full items-center justify-center rounded-lg border border-dashed border-neutral-300">
|
|
|
|
|
+ <div className="text-neutral-500 w-full text-center">
|
|
|
No products found in this category.
|
|
No products found in this category.
|
|
|
- </p>
|
|
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
)}
|
|
)}
|