如何在反应中显示此对象答案

【问题标题】：How can I display this object in react如何在反应中显示此对象
【发布时间】：2021-08-09 06:09:34
【问题描述】：

我收到了来自 sarver 的这样的回复：

{
  "response_code": 200,
  "tickets": {
      "3": {
          "117": "http://....../upload/iblock/4a5/4a529553152b21109e9aa18fa9d4ea9b.pdf"
      },
      "4": {
          "118": "http://...../upload/iblock/4a5/4a529553152b21109e9aa18fa9d4ea9b.pdf"
      },
      "5": {
          "119": "http://...../upload/iblock/4a5/4a529553152b21109e9aa18fa9d4ea9b.pdf"
      },
      "6": {
          "120": "http://.../upload/iblock/4a5/4a529553152b21109e9aa18fa9d4ea9b.pdf"
      },
      "7": {
          "121": ""
      },
      "8": {
          "122": "http://..../upload/iblock/4a5/4a529553152b21109e9aa18fa9d4ea9b.pdf"
      },
    }
  }
}

我应该在网站中显示这些链接，因为它应该是一个数组，但它是一个数组所以有什么线索可以在 react 应用程序中显示这些链接，或者如何将其转换为数组，以便轻松显示？

【问题讨论】：

map 超过 Object.values(data.tickets)。 Object.values 为您提供对象数组。
这能回答你的问题吗？ How to render a Object in React?

标签： javascript arrays reactjs

【解决方案1】：

如果您只想将 tickets 对象转换为 URL 数组（忽略任何这些数字键），您可以使用 Object.values() 和 Array.prototype.flatMap() 进行此操作

const obj = {"response_code":200,"tickets":{"3":{"117":"http://....../upload/iblock/4a5/4a529553152b21109e9aa18fa9d4ea9b.pdf"},"4":{"118":"http://...../upload/iblock/4a5/4a529553152b21109e9aa18fa9d4ea9b.pdf"},"5":{"119":"http://...../upload/iblock/4a5/4a529553152b21109e9aa18fa9d4ea9b.pdf"},"6":{"120":"http://.../upload/iblock/4a5/4a529553152b21109e9aa18fa9d4ea9b.pdf"},"7":{"121":""},"8":{"122":"http://..../upload/iblock/4a5/4a529553152b21109e9aa18fa9d4ea9b.pdf"}}}

const tickets = Object.values(obj.tickets).flatMap(Object.values)

console.log(tickets)

【讨论】：