Estoy tratando de crear una aplicación de compras donde, si el carrito está vacío, muestra un div que dice "carrito de compras está vacío". Pero recibo un error de tipo que dice "Cannot read properties of undefined (reading length)."
Estoy pasando accesorios a mi Cart.js y estoy realmente atascado. ¿Alguna sugerencia?
import React from 'react'; // import 'semantic-ui-css/semantic.min.css' import { Routes, Route } from 'react-router-dom' import { useState } from 'react'; import Nav from './components/Nav'; import NavTwo from './components/NavTwo'; import HotSandwiches from './pages/HotSandwiches'; import Home from './pages/Home'; import ColdSandwiches from './pages/ColdSandwiches'; import ChickenMeals from './pages/ChickenMeals'; import Chocolate from './pages/Chocolate'; import Drinks from './pages/Drinks'; import FruitSnacks from './pages/FruitSnacks'; import SaltySnacks from './pages/SaltySnacks'; import GumandMints from './pages/GumandMints'; import Toiletries from './pages/Toiletries'; import Cart from './components/Cart'; const App = () => { const [cartItems, setCartItems] = useState([]) return ( <div> <Nav /> <NavTwo /> <Routes> <Route path='/' element={<Home />} /> <Route path='hotsandwiches' element={<HotSandwiches />} /> <Route path='coldsandwiches' element={<ColdSandwiches />} /> <Route path='chickenmeals' element={<ChickenMeals />} /> <Route path='chocolate' element={<Chocolate />} /> <Route path='drinks' element={<Drinks />} /> <Route path='fruitsnacks' element={<FruitSnacks />} /> <Route path='saltysnacks' element={<SaltySnacks />} /> <Route path='gumandmints' element={<GumandMints />} /> <Route path='toiletries' element={<Toiletries />} /> <Route path='cart' element={<Cart />} cartItems={cartItems} /> </Routes> </div> ); } export default App;
import React from 'react'; const Cart = ( {cartItems} ) => { return ( <div> Cart items <div> {cart Items . length() === 0 ? <div> No items in cart </div> : <div> Hello </div>} </div> </div> ); } export default Cart;
En tus rutas principales, estás declarando:
<Route path='cart' element={<Cart />} cartItems={cartItems} />
El componente <Route>
no pasa sus accesorios no utilizados a sus hijos. Puede especificarlo dentro element
:
<Route path='cart' element={<Cart cartItems={cartItems} />} />
Además, no estoy seguro de si se trata de un error tipográfico, pero en su archivo de carrito debería ser cartItems.length
en lugar de cart Items.length()
(no hay espacio en el medio y no ()
(llamada a función; es solo una propiedad de objeto)) .