Как исправить Объекты недопустимы как дочерний элемент React - PullRequest
Новая
       7

Как исправить Объекты недопустимы как дочерний элемент React

0 голосов
/ 12 апреля 2019

Я пытаюсь отобразить список товаров в корзине. Список элементов передается как реквизит от моего родительского компонента. Я вызываю 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>

1 Ответ

1 голос
/ 12 апреля 2019

Как гласит ошибка, вы пытаетесь использовать простые объекты как дочерние элементы в элементе. Вы не можете сделать это в 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>
...