通过 API 响应更新状态在 react 中不起作用

Question

我是个新手，要做出反应……我正在开发一个由 youtube 视频指导的投资组合项目。我的疑问是，当我尝试在导航栏中存在的购物车图标中更新状态时，页面变为空白

github 链接：https://github.com/Gopi9655/ECOMMERCE-APP.git

function 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();
  
  },[])
  return ( 
    <div className="App">
     <Products  products={products} Onaddtocart = {handleaddtocart}/>
     <Navbar totalitem={cart.total_items} />
    </div>
  );
}

export default App;

这是我的 navbar.js，它将 total_value 作为道具导入并倾向于为徽章图标设置一个值

export const Navbar  = ({totalitem}) => {
  const classes = useStyles()
  return (
    <>
    <AppBar position='fixed' className={classes.appBar} color="inherit">
      <Toolbar>
        <Typography variant="h6" color="inherit" className={classes.title}>
          <img src={logo} alt="zencart" height="25px" className={classes.image}></img>
          ZenMart
        </Typography>
        <div className='classes.grow'></div>
        <div className='classes.button'></div>
        <IconButton aria-label="show cart item" color="inherit">
          <Badge badgeContent={totalitem} color="secondary">
           <ShoppingCart />
          </Badge>
        </IconButton>
        
      </Toolbar >
    </AppBar>
    </>
  )
}

每当我点击添加到购物车按钮时，我都需要在购物车图标徽章中显示状态变化

请尽快解决我的问题