React购物车添加商品报错：Objects are not valid as a React child

错误出在CartItem组件的参数定义上：

function CartItem({props}){
    const { name, price, amount } = props.item;
    // ...
}

这里用{props}进行解构赋值，意味着你期望从组件接收的props对象中提取名为props的属性，但实际上传入CartItem的props是{ item: 购物车项对象, key: ... }，并不存在props属性，导致props变量为undefined。后续访问props.item会引发错误，最终导致React尝试渲染未正确解构的对象，抛出"Objects are not valid as a React child"错误。

修正CartItem的参数定义，有两种可选写法：

写法一：直接接收props对象 #

import './CartItem.css';

function CartItem(props){
    const { name, price, amount } = props.item;
    return(
        <div>
            <div>{name}</div>
            <div>{price}</div>
            <div>{amount}</div>
        </div>
    )
}

export default CartItem;

写法二：直接解构item属性 #

import './CartItem.css';

function CartItem({ item }){
    const { name, price, amount } = item;
    return(
        <div>
            <div>{name}</div>
            <div>{price}</div>
            <div>{amount}</div>
        </div>
    )
}

export default CartItem;

1. 避免使用Math.random()作为key：Math.random()可能生成重复值，导致React列表渲染异常，建议使用结合商品名称+时间戳的方式，或者引入uuid库生成唯一key。
2. 统一amount的数字类型：FoodItem中input的value默认是字符串，建议在amountChangeHandler中直接转为数字：

function amountChangeHandler(event){
    setAmount(+event.target.value);
}

内容的提问来源于stack exchange，提问作者Giuliano Maradei