Как перебирать вложенные объекты в reactjs?
Поскольку это в объекте, я делаю это, но это не работает. Как мне получить поле «ключ» через цикл?
<div>
<ul>
{tickets && tickets.issues && Object.keys(tickets.issues).map((issue, i) =>
(
<li key = {i}>
Issue number: {tickets.issues.key}
</li>
))}
</ul>
</div>
РЕШЕНИЕ
<div>
<ul>
{this.state.tickets && this.state.tickets.issues && Object.keys(this.state.tickets.issues).map((issue, i) =>
(
<li key = {i}>
Issue number: {this.state.tickets.issues[i].key}
</li>
))}
</ul>
</div>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
tickets.issues - это массив объектов, поэтому:
const { issues } = tickets;
issues.map(issue => console.info(issue.key));
Позвольте мне попробовать это: D
Как мне отобразить это в функции рендеринга?
Не в функции Mount
Простое решение
<div>
<ul>
{tickets && tickets.issues && Object.keys(tickets.issues).map((issue, i) =>
(
<li key = {i}>
Issue number: {tickets.issues.key}
</li>
))}
</ul>
</div>
Он ничего не отображает o.o
Теперь это должно сработать. Я допустил небольшую ошибку. Пожалуйста, проверьте обновленный ответ
Все еще ничего о.о
О, я только что понял, что полей нет
Это только билеты. Выпуски.
@leojrsilao Ура, ладно, ваш OP был вложен с полями. Np. Вы добавили свое решение поверх моего, поэтому я снова отредактировал и добавил только ваше решение к моему ответу. Не стесняйтесь редактировать. Одобряю, если вам нужно
В моем решении данные по-прежнему не отображаются: /, его пусто, данные не отображаются
Эй, похоже, я снова застрял: / можешь проверить мою проблему здесь stackoverflow.com/questions/52596543/…
Глядя на изображение вашего ответа, ключевое поле существует в issues [], но не в полях, поэтому все должно быть в порядке (вложение не требуется):
{ Object.keys(tickets.issues).map((issue, i) => (
<li key = {issue.key}>
Issue number: {issue.key}
</li>
))}
Если у вас есть ключ в полях (не развернут на изображении)
{ Object.keys(tickets.issues).map((issue, i) => (
Object.keys(issue.fields).map(field=>(
<li key = {field.key}>
Issue number: { field.key }
</li>
)
))}
Хм, используя первый метод, где билеты.issues - это массив, не относящийся к полям, я получаю сообщение об ошибке TypeError: невозможно преобразовать undefined или null в объект
хм, проверьте, существуют ли они, {tickets && tickets.issues && Object.keys(...)}, потому что они становятся доступными только после вызова API.
Да ... Я вижу, что сейчас происходит, это отображается до того, как я получу данные JSON в моей функции componentDidMount, как мне перейти оттуда, поэтому объект равен нулю. Есть ли способ получить данные до их рендеринга?
Нет. Вы должны проверить, как я прокомментировал выше.
Хорошо сделано, я сделал это, и да, похоже, пусто, ничего не печатается
Я отредактировал код ur, чтобы показать, что я сделал, и ничего не печатает, хотя на этот раз ошибки нет
Что мне теперь делать: O
Я отправлю свое решение о.о.
ха, вы получали объект от государства. Ладно.
да, но это странно, потому что перед рендерингом я инициализировал билеты в var tickets = this.state XD
Это была глупая ошибка XDDDD
Нет проблем, со мной тоже иногда бывает.
Эй, похоже, я снова застрял, вот ссылка :-( stackoverflow.com/questions/52596543/…
Извини, я просто вижу это и собираюсь спать. Если не получите ответа, то предоставлю завтра. Но вы тоже должны уловить идею в моем ответе. Посмотрите на второй код и попытайтесь понять, что он делает.
Привет, у меня вопрос, а что, если бы мне пришлось поставить <li key = {index}> </li> во внешнем цикле и номер выпуска во внутреннем цикле, как бы выглядел синтаксис? Спасибо.
{ Object.keys(tickets.issues).map((issue, i) => ( <li> { Object.keys(issue.fields).map(field=>( {field.key} ) } </li> ))}
Есть только один массив?