NextJS中state变量无法从props获取初始值的问题求助

在NextJS项目中，将商品名称、ID、数量等props传递给购物车展示组件CartDisplay1时，props能正常传递并显示，但首次打开页面时，把productQuantity存入useState的state变量quantity会出现undefined，刷新页面后才能正确获取值。尝试给state设置固定数值（如10）可正常工作，但这并非可行方案，需解决该问题。

组件代码如下：

interface CartItemprop {
  productId: string;
  productQuantity: number;
  productName: string;
  pImage: string;
  iPrice: number;
  userId: string;
}
const CartDisplay1 = ({
  productId,
  userId,
  productQuantity,
  productName,
  pImage,
  iPrice,
}: CartItemprop) => {
 
   /**This value is undefined on the first run*/
  const [quantity, setQuantity] = useState<number>(productQuantity);

  const dispatch = useDispatch<AppDispatch>();

  const localQtyUp = () => {
    setQuantity(quantity + 1);
  };
  const localQtyDown = () => {
    setQuantity(quantity - 1);
  };
  console.log(`QUANTITY IN THE STATE VARIABLE:${quantity}`);
  console.log(`DATA RECEIVED IN THIS CARTDISPLAY1`);
  console.log(`PRODUCTID: ${productId}`);
  console.log(`PRODUCT QUANTITY IN THE PROP:${productQuantity}`);
  console.log(`PRODUCT NAME:${productName}`);
  console.log(`PRODUCT IMAGE:${pImage}`);
  console.log(`PRODUCT PRICE : ${iPrice}`);

  const { CartItems, totalItems, totalPrice } = useSelector(
    (state: RootState) => state.cartSlice
  );
  console.log(`RECEIVED DATA:`, CartItems, totalItems, totalPrice);

  /**FETCH EXISTING DATA FROM THE DATABASE */

  console.log(`RECEIVED USER ID IN THE CARTDISPLAY FILE :${userId}`);
  /**DELETING FROM DATABASE */
  const deleteFromDb = async () => {
    try {
      await fetch(`/api/cart?product_id=${productId}&user_id=${userId}`, {
        method: "DELETE",
      });
    } catch (error) {
      console.log(`Something went wrong: `, error);
    }
  };
  /**INCREASING ITEM QUANTITY IN THE DATABASE */
  const increaseItemQty = async () => {
    const qtyUp = quantity + 1;
    console.log(`qtyUp : ${qtyUp}`);
    const newPrice = qtyUp * iPrice;

    const res = await fetch(
      `/api/cart?product_id=${productId}&user_id=${userId}`,
      {
        method: "PUT",
        body: JSON.stringify({
          quantity: qtyUp,
          total_price: newPrice,
        }),
      }
    );
  };

  /**DeCREASING ITEM QUANTITY IN THE DATABASE */
  const decreaseItemQty = async () => {
    const qtyDown = quantity - 1;
    console.log(`qtyDown : ${qtyDown}`);
    const newPrice = qtyDown * iPrice;

    const res = await fetch(
      `/api/cart?product_id=${productId}&user_id=${userId}`,
      {
        method: "PUT",
        body: JSON.stringify({
          quantity: qtyDown,
          total_price: newPrice,
        }),
      }
    );
  };

  const handleDelete = () => {
    toast.promise(deleteFromDb(), {
      loading: `Deleting product from the cart`,
      success: `Item deleted successfully`,
      error: `Could not delete item from the cart`,
    });
    dispatch(cartActions.removeFromCart({ pid: productId }));
  };
  const handleOneUp = () => {
    localQtyUp();
    toast.promise(increaseItemQty(), {
      loading: `Update in progress`,
      success: `update successful`,
      error: `update failed`,
    });
    dispatch(
      cartActions.IncrementItem({
        pid: productId,
        price: iPrice,
      })
    );
  };
  const handleOneDown = () => {
    localQtyDown();
    toast.promise(decreaseItemQty(), {
      loading: `Update in progress`,
      success: `update successful`,
      error: `update failed`,
    });
    dispatch(
      cartActions.DecrementItem({
        pid: productId,
        price: iPrice,
      })
    );
  };
  return (
    <>
      <div className="max-w-7xl mx-auto p-2 border-2 border-t-black">
        <div className="flex justify-center items-center gap-x-2 md:justify-between">
          {/* Image */}
          <div className="w-1/4 flex items-center gap-x-4">
            <Image
              className="hover:scale-105 duration-300"
              src={pImage}
              alt="product"
              width={150}
              height={100}
            />
            <div>
              <h2 className="text-xl text-zinc-900 font-medium">
                {productName}
              </h2>
              <button onClick={handleDelete}>
                <Image
                  src="/trash.png"
                  alt="delete icon"
                  width={20}
                  height={20}
                />
              </button>
            </div>
          </div>
          {/* Other Product Data */}
          <div className="w-3/4 flex flex-col gap-y-5 md:flex-row grow justify-around">
            <div>
              <h3 className="text-zinc-900 font-medium text-lg">
                ${iPrice.toFixed(2)}
              </h3>
            </div>
            <div className="flex items-center gap-x-4 ">
              {quantity === 1 ? (
                <button onClick={handleDelete}>
                  <Image
                    src="/trash.png"
                    alt="delete icon"
                    width={20}
                    height={20}
                  />
                </button>
              ) : (
                <button onClick={handleOneDown}>
                  <Image
                    src="/minus.png"
                    alt="minus icon"
                    width={20}
                    height={20}
                  />
                </button>
              )}

              <p className="text-zinc-900 font-medium text-lg">{quantity}</p>
              <button onClick={handleOneUp}>
                <Image src="/plus.png" alt="plus icon" width={20} height={20} />
              </button>
            </div>
            <div>
              <h3 className="text-zinc-900 font-medium text-lg">
                ${(iPrice * quantity).toFixed(2)}
              </h3>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

问题原因 #

1. 异步数据加载导致props初始未就绪
   如果父组件是通过异步请求（比如客户端fetch、getServerSideProps）获取购物车数据，首次渲染CartDisplay1时，productQuantity可能还处于undefined状态，因为异步请求尚未完成。而useState的初始值仅在组件首次挂载时生效一次，后续props更新不会自动同步到state，因此即使之后props变为有效值，state仍会保持undefined。

2. useState初始值的特性限制
   useState的初始参数只会在组件挂载阶段计算一次，后续props的变化不会触发初始值的更新。若首次挂载时productQuantity为undefined，state就会被初始化为undefined，除非手动处理同步逻辑。

解决方法 #

方法1：用useEffect同步props到state #

监听productQuantity的变化，当props更新时自动同步到state：

import { useEffect } from 'react';

// 在CartDisplay1组件内添加
useEffect(() => {
  if (productQuantity !== undefined) {
    setQuantity(productQuantity);
  }
}, [productQuantity]);

该方法能确保state始终与最新的props保持同步，无论首次加载还是后续props变化。

方法2：给props设置默认值 #

在组件解构props时，给productQuantity设置默认值，避免初始时出现undefined：

const CartDisplay1 = ({
  productId,
  userId,
  productQuantity = 1, // 设置默认值
  productName,
  pImage,
  iPrice,
}: CartItemprop) => {
  const [quantity, setQuantity] = useState<number>(productQuantity);
  // ... 其他代码
};

注意：该默认值仅在父组件未传递productQuantity时生效，如果父组件传递了undefined，仍需结合useEffect处理。

方法3：父组件数据就绪后再渲染子组件 #

在父组件中，等待异步数据获取完成后再渲染CartDisplay1，确保props传递时已有有效值：

// 父组件示例
const CartPage = () => {
  const [cartItems, setCartItems] = useState<CartItemprop[] | null>(null);
  
  useEffect(() => {
    const fetchCart = async () => {
      const res = await fetch('/api/cart');
      const data = await res.json();
      setCartItems(data);
    };
    fetchCart();
  }, []);
  
  if (!cartItems) return <div>加载中...</div>;
  
  return (
    <div>
      {cartItems.map(item => <CartDisplay1 key={item.productId} {...item} />)}
    </div>
  );
};

这种方式从根源避免了子组件接收到undefined的props。

内容的提问来源于stack exchange，提问作者Aayman Khalid