Reactjs / JSON объект застрял при попытке отобразить данные во вложенном JSON-объекте

Question

Я застрял, пытаясь отобразить определенное значение во вложенном объекте вactjs.Этот подход, который я использую, работает для одного вложенного объекта следующим образом:

КОД НЕ РАБОТАЕТ, НЕВОЗМОЖНО ОТОБРАЖАТЬ ЭТУ ДАННЫЕ (Невозможно получить данные из customfield_11400 'value')

    {this.state.tickets && this.state.tickets.issues && this.state.tickets.issues.fields && this.state.tickets.issues.fields.customfield_11400 && Object.keys(this.state.tickets.issues.fields.customfield_11400).map((issue, i) =>
    (
       <tr key={i}>
          <td> {this.state.tickets.issues.fields.customfield_11400[i].value} </td>
       </tr>
    ))}

КОД работает, чтобы отобразить эти данные (я могу получить значение ключа)

      {this.state.tickets && this.state.tickets.issues && Object.keys(this.state.tickets.issues).map((issue, i) =>
      (
         <tr key={i}>
            <td> {this.state.tickets.issues[i].key} </td>
         </tr>
      ))}

Попытка этогоРешение, похоже, не работает

  { this.state.tickets && this.state.tickets.issues && Object.keys(this.state.tickets.issues).map((issue, issue_index) => (

      this.state.tickets && this.state.tickets.issues && this.state.tickets.issues.fields && this.state.tickets.issues.fields.customfield_11400 && Object.keys(this.state.tickets.issues.fields.customfield_11400).map((airlineName, field_index)=>(
       <li key={field_index}>
         Airline Name: {this.state.tickets.issues[issue_index].fields.customfield_11400[field_index].value }
       </li>
     )
   )))}

Попытка этого решения 2, кажется, не работает

const fields = () => this.state.tickets && this.state.tickets.issues && Object.keys(this.state.tickets.issues).map((issue, issue_i) => {
  return this.state.tickets && this.state.tickets.issues && this.state.tickets.issues.fields && this.state.tickets.issues.fields.customfield_11400 && Object.keys(this.state.tickets.issues.fields.customfield_11400).map((field, field_i) => {
    return (<div> {this.state.tickets.issues[issue_i].fields.customfield_11400[issue_i].value} </div>)
  })
});

  return 
  (
   {fields()}
  );

Answer 1

Согласно вашему изображению выше, issues и customfield_11400 являются массивами, поэтому вам необходимо получить к ним доступ следующим образом:

this.state.tickets.issues[issue_index].fields.customfield_11400[field_index].value

Поскольку вы перебираете проблемы i - этоуказатель выпуска.Вам может понадобиться еще один цикл с циклом customfield_11400 или, если customfield_11400 имеет только один элемент, вы можете использовать что-то вроде этого:

this.state.tickets.issues[i].fields.customfield_11400[0].value

Редактировать:

Чтобы зациклить оба массива, вы можете сделать что-то вроде этого, однако вам придется добавить нулевые проверки:

const fields = this.state.tickets.issues.map(issue => {
  return issue.fields.customfield_11400.map(field => {
    return (<div> {field.value} </div>)
  })
});