React Bootstrap弹出购物车组件props不显示问题求助

核心问题 #

你在导航栏的Offcanvas中渲染<Cart />组件时，没有传递cartItems属性，但路由页面的<Cart cartItems={cartItems} />是正确传值的，这就是弹出购物车无法显示数据的原因。

解决步骤 #

1. 将App.js中的状态传递给Navbar组件
   在App.js里渲染Navbar时，把cartItems作为props传进去：

   // App.js
   const [cartItems, setCartItems] = useState([]);
   
   // 渲染Navbar的位置
   <Navbar cartItems={cartItems} />
   

2. 在Navbar.js中接收props并传递给内部的Cart组件
   如果Navbar是函数组件，先解构接收cartItems，再在Offcanvas内的Cart组件上传入该属性：

   // Navbar.js
   const Navbar = ({ cartItems }) => {
     // 你的现有逻辑：sideshow、handleClose等
   
     return (
       // 其他导航栏代码
       <Offcanvas show={sideshow} onHide={handleClose} placement='end' style={{marginTop:'8vh'}}>
         <Offcanvas.Header closeButton>
           <Offcanvas.Title>Keranjang</Offcanvas.Title>
         </Offcanvas.Header>
         <Offcanvas.Body>
           {/* 传入cartItems属性 */}
           <Cart cartItems={cartItems} />
         </Offcanvas.Body>
       </Offcanvas>
     )
   }
   

原理说明 #

cartItems状态是在App.js中维护的，路由页面的Cart组件能正常显示数据是因为你直接传递了props；但Navbar里的Cart组件没有获取该状态的渠道，必须通过App.js将状态传递给Navbar，再由Navbar传递给内部的Cart组件，弹出购物车才能拿到正确的购物车数据。

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