对象作为 React 子项无效（找到：object 和键 {totalItems}）。 如果您打算渲染一组孩子，请改用数组

Question

I am trying to update the number on the badge in cart icon in my site and passing the totalItemls={cart.total_items} as a props to navbar but it't throwing me an error that objects are not valid as react chiled. I am using commerce.js api and material UI.

i have also console logged the total_items and it outputs a number i just want to pass that number in the badge in the navbar

App.js

// import React from 'react';
// import Products from './components/Products/Products';


 import { commerce} from './lib/commerce';

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


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)
   
    // console.log(products);
    return (
        <div>
            <Navbar totalItems={cart.total_items}/>
            <Products products={products} onAddtoCart={handleAddToCart}/>
        </div>
    );
}

export default App;

Navbar.js

import React from 'react';
import { AppBar, Toolbar, IconButtone,Badge, MenuItem,Menu,Typography, IconButton } from '@material-ui/core';
import {ShoppingCart} from '@material-ui/icons'

import logo from '../../assets/logo.jpg'
import useStyles from './styles'

const Navbar=(totalItems) =>{

    const classes=useStyles();
    return (
        <div>
            <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}/>
                        E-Commerce
                    </Typography>
                    <div className={classes.grow}/>
                    <div className={classes.button}>
                        <IconButton aria-label="Show Cart items" color="inherit">
                            <Badge badgeContent={totalItems} color="secondary">
                                <ShoppingCart/>
                            </Badge>

                        </IconButton>

                    </div>
                </Toolbar>

            </AppBar>
        </div>
    );
}

export default Navbar;

Answer 1

The prop passed to a react component needs to be an object like this:

const Navbar=({totalItems}) =>{

Answer 2

Just add curly braces around the totalItems property at Navbar component as previous response suggests.