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

Question

我正在尝试呈现购物车中的商品列表。项目列表作为 props 从我的父组件传递。我正在调用 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 ，您需要在 map 回调中创建一个元素结构而不是一个普通对象。 (或者稍后使用第二个 map 来做到这一点，但是......)

例如(但当然，您必须调整此结构以满足您的需求):

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

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