Question

我正在尝试呈现以下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数组，甚至没有任何分隔。我尝试了互联网上所有的所有事情。但是什么都没有。我该如何解决？

Answer 1

您正在读取原始数组并显示它-这就是为什么它全部显示在一行中的原因。 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>
  )
);

在React JS中遍历数组的对象

1 个答案: