Преглед на файлове

根据eslint 调整代码

zhangzf преди 1 ден
родител
ревизия
fe1111a121

+ 25 - 14
src/app/(public)/category/[slug]/[id]/_components/ProductListing.tsx

@@ -59,7 +59,7 @@ export default function ProductListing({
 
   const [products, setProducts] = useState(initialProducts);
   const [isLoading, setIsLoading] = useState(false);
-  const [pageInfo, setPageInfo] = useState(initialPageInfo);
+  const [, setPageInfo] = useState(initialPageInfo);
   const [_total, setTotal] = useState(initialTotal);
   const currentPage = query.page ?? 1;
   const perPage = 8;
@@ -67,6 +67,7 @@ export default function ProductListing({
   const firstRender = useRef(true);
   const apolloClient = useApolloClient();
   const [pageInputVal, setPageInputVal] = useState(String(currentPage));
+  const queryRef = useRef(query);
   const fetchProducts = async (currentQuery: QueryState) => {
     if (isLoading) return; // ✅ 防重复请求:请求进行中直接返回
     try {
@@ -100,9 +101,17 @@ export default function ProductListing({
       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(() => {
     if (firstRender.current) {
       firstRender.current = false;
@@ -157,25 +166,27 @@ useEffect(() => {
   }
   // 筛选排序回调
   const handleFilterChange = useCallback((filters: Record<string, string>) => {
+    const latestQuery = queryRef.current;
     //对比避免重复渲染导致分页初始化一直 为1
-   if (isFiltersEqual(filters, query.filters)) {
+   if (isFiltersEqual(filters, latestQuery.filters)) {
      return;
    }
     updateQuery({
-      ...query,
+      ...latestQuery,
       filters,
       page: 1,
     });
-  }, [query]);
+  }, []);
     const handleSortChange = useCallback((sortValue:string, sortKey:string, reverse:boolean) => {
+      const latestQuery = queryRef.current;
     updateQuery({
-      ...query,
+      ...latestQuery,
       sortValue,
       sortKey,
       reverse,
       page: 1,
     });
-  }, [query]);
+  }, []);
   // 分页逻辑
   function generatePageNumbers(current: number, total: number) {
     const pages: number[] = [];
@@ -232,7 +243,7 @@ useEffect(() => {
           filters={query.filters}
           onChange={handleFilterChange}
         />
-        <div>
+        <div className={isArray(products) && products.length > 0 ?"":"w-full"}>
               <NewSortOrder
                 sortOrders={newSortByFields}
                 title="Sort by"
@@ -316,11 +327,11 @@ useEffect(() => {
                   </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.
-                     </p>
+                     </div>
                    </div>
                  </div>
                )}

+ 1 - 1
src/components/catalog/product/NewProductGridItems.tsx

@@ -8,7 +8,7 @@ export default function NewProductGridItems({
 }: {
   products: any;
 }) {
-  return products.map((product: any, index: number) => {
+  return products.map((product: any) => {
 
     const imageUrl = getImageUrl(product?.baseImageUrl, baseUrl, NOT_IMAGE);
     const price =

+ 13 - 4
src/components/theme/filters/NewMobileFilter.tsx

@@ -22,7 +22,16 @@ export default function MobileFilter({
   const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   // 保存最新onChange,移出effect依赖
   const onChangeRef = useRef(onChange);
-
+  function shallowEqualRecord(a: Record<string, string>, b: Record<string, string>) {
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+  for (const k of keysA) {
+    if (a[k] !== b[k]) return false;
+  }
+  return true;
+}
+const prevFiltersRef = useRef(filters);
   useEffect(() => {
     onChangeRef.current = onChange;
   }, [onChange]);
@@ -35,10 +44,10 @@ export default function MobileFilter({
 
   // ✅ 同步父组件filters到本地,增加对比:内容不变就跳过setState,打断循环
   useEffect(() => {
-    // 浅对比:内容完全一样,直接return,不更新tempFilters
-    if (JSON.stringify(tempFilters) === JSON.stringify(filters)) {
+      if (shallowEqualRecord(prevFiltersRef.current, filters)) {
       return;
     }
+    prevFiltersRef.current = filters;
 
     if (debounceTimer.current) {
       clearTimeout(debounceTimer.current);
@@ -62,7 +71,7 @@ export default function MobileFilter({
     };
   }, []);
 
-  //  防抖,只监听 tempFilters,不再依赖 onChange
+  //  防抖,只监听 tempFilters,不再依赖 onChange
   useEffect(() => {
     if (isFirstMount.current) {
       isFirstMount.current = false;

+ 0 - 1
src/components/theme/filters/NewSortOrder.tsx

@@ -29,7 +29,6 @@ interface NewSortOrderProps {
 
 const NewSortOrder: FC<NewSortOrderProps> = ({
   sortOrders,
-  title,
   value,
   onChange,
 }) => {