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

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，您需要在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>