Попытка сопоставить с 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.
Спасибо вам всем
Я не уверен, но вы не можете использовать Object.keys внутри функции рендеринга.
Спасибо, это дает больше возможностей для решения моего вопроса. Однако ответ @Passersby был самым коротким решением без необходимости переписывать весь код. Я не знаю, почему люди проголосовали против.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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(), который говорит сам за себя.
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>
);
})}
Вы пытаетесь зациклить только ключи. Просто попробуйте
cartItems.map((item, i) => {.