Question

我正在尝试渲染购物车中的物品清单。项目列表从我的父组件作为道具传递。我正在调用mapCartItemsToItems，但它不会呈现并指示

“对象无效，不能作为React子对象（找到：带有键{childKey，header，meta，extra}的对象。）。如果要渲染子对象的集合，请改用数组。”

const mapCartItemsToItems = items =>
    items.map(({ id, product_id, name, quantity, meta }) => {
      const price = meta.display_price.with_tax.unit.formatted || null

      return {
        childKey: id,
        header: (
          <Link href={`/product?id=${product_id}`} passHref>
            <div>{name}</div>
          </Link>
        ),
        meta: `${quantity}x ${price}`,
        extra: <button onClick={() => removeFromCart(id)}>Remove</button>
      }
    })
return <div>{mapCartItemsToItems(items)}</div>

Answer 1

如错误所述，您正在尝试将简单对象用作元素中的子对象。您无法在React中做到这一点。

如果要在要生成的列表中使用childKey和header以及meta和extra，则需要在{{ 1}}回调，而不是普通对象。（或稍后再使用第二个map，但是...）

例如（但当然，您必须调整此结构以适合您的需求）：

map

如何修复对象作为React子对象无效

1 个答案: