Блог

Я пытаюсь отобразить следующий ответ json.

  "tickets": {
        "tickets": [
            "A Nuisance in Kiribati",
            "A Nuisance in Saint Lucia"
        ]
  }
  

Моя попытка выглядит следующим образом.

 const display4 = Object.keys(this.state.ticketsList).map(
  (keyName, keyIndex) => {
    return (
      <div className="my-posts">
        <li key={keyIndex}>{keyName}_{keyIndex}:</li>
        <li key={keyIndex}>{this.state.ticketsList[keyName]}</li>
      </div>
    );
  }
);
  

Но он будет отображать массив tickets в одной строке даже без какого-либо разделения. Я перепробовал все самые разные вещи в Интернете. Но пока ничего не работает. Как я могу это исправить?

Вы читаете необработанный массив и отображаете его — вот почему он отображает все в одной строке. this.state.ticketsList[keyName] является массивом. Поэтому вам нужно выполнить итерацию по нему в дополнительном цикле для отображения каждого элемента.

Попробуйте это:

 const display4 = Object.values(this.state.ticketsList).map(
  tickets => tickets.map((ticketName, index) =>
      <div className="my-posts">
        <li key={index}>{ticketName}_{index}:</li>
        <li key={index}>{ticketName}</li>
      </div>
  )
);