React组件状态传递问题：点击Add To Cart按钮无法触发Cart组件显示

错误原因 #

出现「setOpen is not a function」是因为CartButton组件没有从Navbar接收到正确的状态控制函数，同时CartButton内的点击逻辑有误——直接调用setOpen(open)是把当前状态值传给setter，而非切换弹窗显示状态。

具体修复方案 #

1. 基础场景（CartButton在Navbar内部或同层级） #

修改Navbar组件

简化购物袋图标的点击事件，并将封装好的状态切换方法传递给CartButton：

const Navbar = () => {
  const [open, setOpen] = useState(false);

  const toggleCart = () => {
    setOpen(!open);
  };

  return (
    <header>
      <div>
        <nav>
          <ul>
            <li>
                {/* 无需传递open参数，toggleCart内部已处理状态切换 */}
                <HiOutlineShoppingBag onClick={toggleCart} />
            </li>
          </ul>
        </nav>
      </div>
      {open && <Cart />}
      {/* 若CartButton在Navbar内使用，直接传toggleCart方法 */}
      <CartButton onToggleCart={toggleCart} />
    </header>
  );
};

export default Navbar;

修改CartButton组件

接收父组件传递的切换方法，直接绑定到点击事件：

const CartButton = ({ onToggleCart }) => {
  return (
    <button onClick={onToggleCart}>
      <HiOutlineShoppingBag />
      <p className="text-bold">Add To Cart</p>
    </button>
  );
};

export default CartButton;

2. 跨页面场景（CartButton在其他独立页面） #

如果CartButton需要在Navbar之外的页面使用，必须通过全局状态管理共享状态控制逻辑，这里以React Context为例实现：

第一步：创建CartContext

// CartContext.js
import { createContext, useContext, useState } from 'react';

const CartContext = createContext();

export const CartProvider = ({ children }) => {
  const [open, setOpen] = useState(false);

  const toggleCart = () => {
    setOpen(!open);
  };

  return (
    <CartContext.Provider value={{ open, toggleCart }}>
      {children}
    </CartContext.Provider>
  );
};

export const useCart = () => useContext(CartContext);

第二步：在根组件包裹CartProvider

// App.js
import { CartProvider } from './CartContext';
import Navbar from './Navbar';
import ProductPage from './ProductPage'; // 包含CartButton的页面

function App() {
  return (
    <CartProvider>
      <Navbar />
      <ProductPage />
    </CartProvider>
  );
}

export default App;

第三步：Navbar和CartButton使用useCart钩子

// Navbar.js
import { useCart } from './CartContext';

const Navbar = () => {
  const { open, toggleCart } = useCart();

  return (
    <header>
      <div>
        <nav>
          <ul>
            <li>
                <HiOutlineShoppingBag onClick={toggleCart} />
            </li>
          </ul>
        </nav>
      </div>
      {open && <Cart />}
    </header>
  );
};

export default Navbar;

// CartButton.js
import { useCart } from './CartContext';

const CartButton = () => {
  const { toggleCart } = useCart();

  return (
    <button onClick={toggleCart}>
      <HiOutlineShoppingBag />
      <p className="text-bold">Add To Cart</p>
    </button>
  );
};

export default CartButton;

核心要点 #

• 同层级组件直接传递状态切换方法即可，避免手动操作setter
• 跨页面场景必须用Context/Redux等工具共享状态，避免多层级props传递的繁琐
• 点击事件逻辑要直接调用切换方法，不要传递当前状态值给setter

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