Просмотр исходного кода

根据eslint代码检查建议,把加购弹窗组件修改为只在客户端加载

fogwind 1 день назад
Родитель
Сommit
2433dbbe5a

+ 7 - 7
src/components/Portal.tsx

@@ -1,16 +1,16 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+// import { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 export default function Portal({ children }: { children: React.ReactNode }) {
-  const [mounted, setMounted] = useState(false);
+  // const [mounted, setMounted] = useState(false);
 
-  // useEffect 只会在客户端执行,服务端渲染时不会运行(Next.js 在服务器端会跳过所有 useEffect / useLayoutEffect)。
-  useEffect(() => {
-    setMounted(true); // 组件挂载后,把标志位置为 true
-  }, []); // 空依赖数组,仅执行一次
+  // // useEffect 只会在客户端执行,服务端渲染时不会运行(Next.js 在服务器端会跳过所有 useEffect / useLayoutEffect)。
+  // useEffect(() => {
+  //   setMounted(true); // 组件挂载后,把标志位置为 true
+  // }, []); // 空依赖数组,仅执行一次
 
-  if (!mounted) return null; // SSR 时不渲染,避免 hydration 错误
+  // if (!mounted) return null; // SSR 时不渲染,避免 hydration 错误
   return createPortal(children, document.body);
 }

+ 9 - 8
src/components/common/AddToCartModal/AddToCartModal.tsx

@@ -35,7 +35,7 @@ import {
     findNearestAvailableVariant
 } from "@/utils/variantTools";
 
-export function AddToCartModal() {
+export default function AddToCartModal() {
     const dispatch = useAppDispatch();
     const {isOpen, product} = useAppSelector((state) => state.addToCartDialog);
 
@@ -52,7 +52,8 @@ export function AddToCartModal() {
     },[product?.flexibleVariants]);
 
     const productOptions: ProductOption[] = useMemo(() => {
-        return product?.productOptions ? JSON.parse(product.productOptions) : [];
+        const opts = product?.productOptions;
+        return opts ? JSON.parse(opts) : [];
     },[product?.productOptions]);
 
     // 获取所有可用变体
@@ -62,7 +63,7 @@ export function AddToCartModal() {
 
     const isSaleable = product?.isSaleable;
 
-    const [productQty, setProductQty] = useState(1);
+    const [productQty] = useState(1);
 
 
     // 记录当前哪个选项组刚刚被点击(用于实现“点击组内全部可点”)
@@ -136,7 +137,7 @@ export function AddToCartModal() {
         let totalLinePrice = 0;
         let totalNowPrice = 0;
         let save = 0;
-        let variant = flexibleVariants.find((v) => {
+        const variant = flexibleVariants.find((v) => {
             const vIds = v.optionValues.map((ov) => ov.id);
             return selectedIds.length === vIds.length && selectedIds.every((id) => vIds.includes(id));
         });
@@ -167,9 +168,9 @@ export function AddToCartModal() {
         clickValueId: number;
     }) => {
         // 更新前需要判断当前选中的组合是否可以购买,如果可以购买正常更新;如果不能购买查找可以购买的组合然后更新
-        let {clickOptionId: optionId, clickValueId: valueId} = result;
+        const {clickOptionId: optionId, clickValueId: valueId} = result;
         let newSelected: Record<number, number> = {...selected,[optionId]: valueId};
-        let selectedValueIds = Object.values(newSelected);
+        const selectedValueIds = Object.values(newSelected);
         if(!isCombinationAvailable(selectedValueIds, availableVariants)) {
             newSelected = findNearestAvailableVariant(optionId,valueId,{...newSelected},productOptions,availableVariants);
         }
@@ -181,12 +182,12 @@ export function AddToCartModal() {
 
     async function addProductToCart(action:string = 'addtocart') {
             
-        let params = { 
+        const params = { 
             productId: String(product?._id), 
             quantity: productQty,
             variantId: currentVariantInfo.variant?._id,
         };
-        let res = await onAddToCart(params);
+        const res = await onAddToCart(params);
         console.log('onAddToCart run ----- 1');
         if(action === 'buynow') {
             if(res) {

+ 3 - 1
src/components/common/AddToCartModal/AddToCartModalWrapper.tsx

@@ -1,8 +1,10 @@
 "use client";
 
-import { AddToCartModal } from "@components/common/AddToCartModal/AddToCartModal";
+// import { AddToCartModal } from "@components/common/AddToCartModal/AddToCartModal";
 import { useAppSelector } from "@/store/hooks";
+import dynamic from 'next/dynamic';
 
+const AddToCartModal = dynamic(() => import("./AddToCartModal"),{ssr: false});
 export function AddToCartModalWrapper() {
   const {product} = useAppSelector((state) => state.addToCartDialog);