对象作为 React 子项无效（找到：具有键 {totalItems} 的对象）。如果您打算呈现子集合，请改用数组

Question

我正在尝试更新我网站中购物车图标中徽章上的数字，并将 totalItemls={cart.total_items} 作为道具传递给导航栏，但它并没有给我一个对象不存在的错误有效作为冷藏反应。我正在使用 commerce.js api 和 material UI.

我还通过控制台记录了 total_items，它输出了一个数字，我只想在导航栏的徽章中传递该数字

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

传递给 React 组件的 prop 需要是这样的对象：

const Navbar=({totalItems}) =>{

Answer 2

只需在 Navbar 组件的 totalItems 属性周围添加花括号，如之前的回复所建议的那样。

对象作为 React 子项无效（找到：具有键 {totalItems} 的对象）。如果您打算呈现子集合，请改用数组

Objects are not valid as a React child (found: object with keys {totalItems}). If you meant to render a collection of children, use an array instead

javascript

reactjs

material-ui

commerce.js