react.js和commerce.js问题，cart值totalItems没有正常工作

Question

我在显示购物车中的项目总数时遇到问题。购物车本身加载没有问题，添加物品也没有问题。但是，当我试图获取cart totalItems＝｛cart.total_items｝中的项目总数并将其传递到navbar.jsx文件以显示时，我会遇到很多错误。app.js文件如下：

import React, { useState, useEffect } from 'react';
import { commerce } from './lib/commerce';
import { Products, Navbar } from './components';

const App = () => {
const [products, setProducts] = useState([]);
const [cart, setCart] = useState({});
const fetchProducts = async () => {
const { data } = await commerce.products.list();
setProducts(data);
};
const fetchCart = async () => {
setCart(await commerce.cart.retrieve());

};

const handleAddToCart = async (productId, quantity) => {
const item = await commerce.cart.add(productId, quantity);
setCart(item.cart);
}


useEffect(() => {
fetchProducts();
fetchCart();
}, []);

console.log(cart);

return (
<div>
<Navbar totalItems={cart.total_items}  />
<Products products={products} onAddToCart={handleAddToCart} />
</div>
)
};
export default App;

我得到的主要错误是：；未捕获错误：对象作为React子对象无效(找到：键为｛totalItems｝的对象(。如果要渲染子对象的集合，请改用数组"以及"；上述错误发生在组件"中；。我是react.js的新手，如果有任何帮助，我将不胜感激。

Navbar.jsx代码如下：

从"React"导入React；从"@materialui/core"导入｛AppBar、Toolbar、IconButton、Badge、MenuItem、Menu、Typhography｝；从"@material-ui/icons"导入｛ShoppingCart｝；

从'../..导入徽标/assets/mainlogo.png'；从"导入useStyles/风格；

const-navbar=(｛totalItems｝(=>{const classes=useStyles；

return (
<>
<AppBar position="fixed" className={classes.appBar} color="inherit">
<Toolbar>
<Typography variant="h6" className={classes.title} color="inherit">
<img src={logo} alt="Commerce.js" height="25px" className={classes.image} />
Project
</Typography>
<div className={classes.grow} />
<div className={classes.button}>
<IconButton aria-label="Show cart items" color="inherit">
<Badge overlap="rectangular" badgeContent={totalItems}  color="secondary">
<ShoppingCart/>
</Badge>
</IconButton>
</div>
</Toolbar>
</AppBar>
</>

)}导出默认导航条

Answer 1

我相信我们在youtube上做的是同一个项目，我也遇到了这个问题。

你应该尝试添加吗？在项目之后然后添加.cart-

setMyCart(item?.cart)

或者你可以忽略cart，它会很好地工作。

每次你遇到这个未定义的错误时，你都应该解决它吗？或三元，例如本例：

if (!myCart.line_items) return 'Loading...'   return (
<Container>
<div className={classes.toolbar} />
<Typography className={classes.title} variant="h3" gutterBottom>
Your Shopping Cart
</Typography>
{!myCart.line_items.length ? <EmptyCart /> : <FilledCart />}
</Container>   ) }