如何在Cart状态更新后执行updateCart函数？处理页面重载场景

你的问题核心是useEffect的依赖数组为空，仅在首次渲染执行，而此时Cart还未加载完成。要让updateCart在Cart有值时触发，只需调整useEffect的依赖项，同时优化代码避免潜在问题：

1. 修正useEffect的依赖数组 #

把Cart、updateCart、allproducts都加入依赖数组，这样当Cart从空变为有值时，useEffect会重新执行，此时就能触发updateCart：

useEffect(() => {
  if (Object.keys(Cart).length !== 0 && allproducts?.[0]?.products) {
    updateCart();
  }
}, [Cart, updateCart, allproducts]);

2. 优化updateCart函数（可选但推荐） #

• 使用Object.entries遍历Cart更简洁
• 增加空值判断，避免allproducts[0].products不存在时报错
• 用函数式更新确保获取最新的Cart状态

const updateCart = useCallback(() => {
  updateNewCart(prevCart => {
    // 先判断allproducts是否有有效数据
    if (!allproducts?.[0]?.products) return prevCart;

    return Object.fromEntries(
      Object.entries(prevCart).map(([sku, item]) => {
        const product = allproducts[0].products.find(x => x.sku === sku);
        if (!product) return [sku, item];

        const currentPrice = product.product_price;
        if (item.price !== currentPrice) {
          return [sku, { ...item, price: currentPrice }];
        }
        return [sku, item];
      })
    );
  });
}, [allproducts, updateNewCart]);

说明 #

• 用useCallback包裹updateCart，避免每次渲染都创建新函数，导致useEffect不必要触发
• 增加allproducts?.[0]?.products的判断，防止数组为空或未加载时出现Cannot read properties of undefined错误
• 函数式更新updateNewCart(prevCart => ...)确保我们基于最新的Cart状态进行修改，避免闭包问题

内容的提问来源于stack exchange，提问作者Big Loot