传递道具时无法读取未定义(长度)的属性

Question

我正在尝试制作一个购物应用程序，如果购物车是空的，它会显示一个div，上面写着"购物车是空的"但我收到一个类型错误，说"Cannot read properties of undefined (reading length)."我正在把道具传给我的Cart.js，真的被卡住了。有什么建议吗？

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;

Answer 1

在主路由中，您声明：

<Route path='cart' element={<Cart />} cartItems={cartItems} />

<Route>组件不会将其未使用的道具传递给其子级。您可以在element:中指定

<Route path='cart' element={<Cart cartItems={cartItems} />} />

此外，不确定这是否是拼写错误，但在您的购物车文件中，它应该是cartItems.length而不是cart Items.length()(中间没有空格，也没有()(函数调用；它只是一个对象属性((。