React.js中map遍历props传入的cart对象时如何访问line_items元素

现有代码存在三个核心错误：

• 遍历对象选错：对整个cart对象执行Object.values()会把cart的所有顶层属性（包括id、总商品数、总金额、货币单位、line_items等）全部遍历出来，并非仅遍历购物车商品条目
• 属性访问路径错误：line_items是cart对象的顶层数组属性，数组内的每个元素才是单个购物车商品，商品名称直接挂在单个商品对象上，不存在item.line_items.name的访问路径
• 细节问题：子组件定义名是Cart，父组件调用时写的是CartItem，组件名不匹配也会导致渲染报错；用数组下标当key在购物车商品增减、排序时会引发渲染异常。

首先修改父组件CartContainer的逻辑，直接遍历cart.line_items数组，同时加加载兜底避免接口未返回时的空值报错：

const CartContainer = ({cart}) => {
    // 接口未返回cart数据时先渲染加载提示
    if (!cart?.line_items) return <div>购物车加载中</div>
    
    return(
        <div className="container mx-auto"> 
             <div className="grid grid-rows-3 gap-2 auto-cols-max">
              {
                 // 直接遍历商品条目数组
                 cart.line_items.map((item) =>
                 // 用商品自带的唯一id作为key，避免渲染异常
                 (<CartItem item={item} key={item.id}/>))
              } 
            </div>
        </div>
    )
}

再修改子组件，修正属性访问路径，统一组件名：

const CartItem = ({item}) => {
    return (
      <div className="rounded overflow-hidden shadow-lg">
        <div className="px-1 py-1">
          {/* 单个商品的名称直接取item.name即可 */}
          <div className="text-s">{item.name}</div>
          {/* 其他常用商品属性可按需取用：
              商品数量：item.quantity
              格式化单价：item.price.formatted
              商品主图：item.image?.url
          */}
        </div>
      </div>
    )
}

commerce.js的cart对象结构中，所有购物车商品都存在line_items数组下，其余顶层属性均为购物车全局统计信息，不需要参与单个商品条目的遍历渲染。

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