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

#javascript #arrays #reactjs #object #next.js

#javascript #массивы #reactjs #объект #next.js

Вопрос:

Я пытаюсь отобразить список товаров в корзине. Список элементов передается как реквизит из моего родительского компонента. Я вызываю mapCartItemsToItems, но он не отображает и не указывает, что

«Объекты недопустимы в качестве дочернего элемента React (найдено: объект с ключами {дочерний ключ, заголовок, мета, дополнительный}). Если вы хотели отобразить коллекцию дочерних элементов, вместо этого используйте массив. «

 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:

Как указано в ошибке, вы пытаетесь использовать простые объекты в качестве дочерних элементов в элементе. Вы не можете этого сделать в React.

Если вы хотите использовать childKey and header и meta and 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>