Next.js中组件接收状态与方法时出现undefined问题求助

核心原因：Layout组件未转发Props到NavBarTop2 #

你在MyApp里把cart、saveCart等props传给了Layout，但如果Layout组件没有把这些props传递给内部的NavBarTop2，那么NavBarTop2自然拿不到这些值，只会显示undefined。

修复步骤：修改Layout组件 #

找到你的Layout组件代码，确保在渲染NavBarTop2时，把接收到的所有相关props传递过去：

// Layout组件示例代码
function Layout({ cart, saveCart, addToCart, clearCart, removeFromCart, subTotal, children }) {
  return (
    <div>
      {/* 把props传递给NavBarTop2 */}
      <NavBarTop2 
        cart={cart}
        saveCart={saveCart}
        addToCart={addToCart}
        clearCart={clearCart}
        removeFromCart={removeFromCart}
        subTotal={subTotal}
      />
      <main>{children}</main>
    </div>
  );
}

export default Layout;

额外潜在问题修复（避免后续bug） #

虽然你说页面能拿到值，但代码里还有几个可能导致异常的问题，建议一并修复：

1. 状态更新未创建新对象 #

在addToCart和removeFromCart里，直接把cart赋值给newCart是引用赋值，修改newCart会直接修改原状态对象，React无法检测到状态变化，可能导致页面不更新。应该用扩展运算符创建新对象：

// 修复addToCart
const addToCart = (itemCode, qty, price, name, size, variant) => {
  let newCart = { ...cart };
  if (itemCode in newCart) {
    newCart[itemCode].qty = newCart[itemCode].qty + qty;
  } else {
    newCart[itemCode] = { qty: 1, price, name, size, variant };
  }
  setCart(newCart);
  saveCart(JSON.stringify(newCart)); // 存localStorage时要转成字符串
};

// 修复removeFromCart
const removeFromCart = (itemCode, qty) => {
  let newCart = { ...cart };
  if (itemCode in newCart) {
    newCart[itemCode].qty = newCart[itemCode].qty - qty;
    if (newCart[itemCode].qty <= 0) {
      delete newCart[itemCode];
    }
  }
  setCart(newCart);
  saveCart(JSON.stringify(newCart));
};

2. saveCart函数的两个错误 #

• 拼写错误：keys.lenght应该是keys.length
• 计算subTotal时用了原cart而不是传入的myCart，导致计算错误；同时存localStorage时要转成字符串：

const saveCart = (myCart) => {
  localStorage.setItem("cart", JSON.stringify(myCart));
  let subt = 0;
  let keys = Object.keys(myCart);
  for (let i = 0; i < keys.length; i++) {
    subt += myCart[keys[i]].price * myCart[keys[i]].qty;
  }
  setSubTotal(subt);
};

3. 初始localStorage读取优化 #

直接从localStorage初始化state，避免useEffect里的异步更新：

const [cart, setCart] = useState(() => {
  try {
    const savedCart = localStorage.getItem("cart");
    return savedCart ? JSON.parse(savedCart) : {};
  } catch (error) {
    console.error(error);
    localStorage.clear();
    return {};
  }
});

内容的提问来源于stack exchange，提问作者Ahsan Roomi