Попытка сопоставить с Objects.key.map() безуспешно

Я безуспешно пытаюсь напечатать статус своей корзины в таблице JSX.

У меня есть этот вывод объекта в state Chrome Console:

{
  "cartItems": {
    "5": {
      "id": 5,
      "name": "Aut assumenda.",
      "price": 526,
      "quantity": 1,
      "attributes": [],
      "conditions": [],
      "associatedModel": {
        "id": 5,
        "name": "Aut assumenda.",
        "description": "Nihil quisquam hic voluptatem consequuntur nemo et amet rerum.",
        "price": "526",
        "created_at": "2020-11-25T22:43:32.000000Z",
        "updated_at": "2020-11-25T22:43:32.000000Z"
      }
    },
    "6": {
      "id": 6,
      "name": "Non est consequatur.",
      "price": 453,
      "quantity": 1,
      "attributes": [],
      "conditions": [],
      "associatedModel": {
        "id": 6,
        "name": "Non est consequatur.",
        "description": "Facilis itaque ut reiciendis blanditiis maxime corrupti voluptatem.",
        "price": "453",
        "created_at": "2020-11-25T22:43:32.000000Z",
        "updated_at": "2020-11-25T22:43:32.000000Z"
      }
    }
  }
}

Я хочу напечатать свойства объекта с помощью метода Object.keys.map() следующим образом:

{
    Object.keys(cartItems).map((item, i) => {
        return ( <
            tr key = {i} >
            <td scope = "row">{item.name}</td>
            <td>{item.price}</td>
            <td>{item.quantity}</td>
            </tr>
        );
    })
}

Тем не менее, я не могу правильно распечатать свою таблицу корзины. Я играл с журналом консоли, и я не могу найти решение для этого. У него, безусловно, есть простое решение, но я новичок в Javascript, и это не очевидно для меня по сравнению с моим опытом.

Если бы я console.info(item) внутри метода карты, я бы получил имена объектов, которые в данном случае 5 и 6.

Спасибо вам всем

Вы пытаетесь зациклить только ключи. Просто попробуйте cartItems.map((item, i) => {.

SelvaS 14.12.2020 21:14

Я не уверен, но вы не можете использовать Object.keys внутри функции рендеринга.

deleuterio 14.12.2020 21:15

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

Fer Toasted 15.12.2020 16:26
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
205
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я думаю, вы ищете Object.values(cartItems)

{Object.values(cartItems).map((cartItem, i) => {
                        return (
                            <tr key = {i}>
                                <td scope = "row">{cartItem.name}</td>
                                <td>{cartItem.price}</td>
                                <td>{cartItem.quantity}</td>
                            </tr>
                        );
                    })}

Это был правильный ответ. Я не знал о методе value(), который говорит сам за себя.

Fer Toasted 14.12.2020 21:47

Object.keys возвращает, как следует из названия, ключи объекта, который вы передаете в качестве аргумента. Поскольку вам нужны пары ключ-значение, вы должны сделать следующее:

{Object.keys(cartItems).map(i => {
                        const item = cartItems[i];
                        return (
                            <tr key = {i}>
                                <td scope = "row">{item.name}</td>
                                <td>{item.price}</td>
                                <td>{item.quantity}</td>
                            </tr>
                        );
                    })}

Другие вопросы по теме