方法 map() - 從后端數組一次獲取所有 object 個值

Question

我正在使用 axios 下載后端結構數據。

我有這樣的東西：advancedProfile.technologies（包含 5 個對象的數組）帶有鍵 {title, link, category, date, id}）。

然后我使用 map 渲染一個 div。

代碼行是這樣的：

{download.data.advancedProfile.technologies.map(obj=><div>{obj.title}</div>)}

通過這一行，我可以渲染數組中的所有 5 個對象，但只能使用一個鍵值。

我心不在焉，但我怎么才能 map 並一次獲得所有 5 個對象和所有鍵？ 我不想單獨復制和粘貼所有鍵值。

Answer 1

如果您只需要值：

{download.data.advancedProfile.technologies.map(obj => (
  <div>
    {Object.values(obj).map(value => <div>{value}</div>)
  </div>
))}

如果您需要鍵和值：

{download.data.advancedProfile.technologies.map(obj => (
  <div>
    {Object.entries(obj).map(([key, value])=> <div>{key}: {value}</div>)
  </div>
))}

Answer 2

如果您希望內聯所有屬性：

{download.data.advancedProfile.technologies.map(obj => <div>{obj.title}, {obj.link}, {obj.category}, {obj.date}, {obj.id}</div>)}

如果您希望每個屬性都在單獨的div ：

{download.data.advancedProfile.technologies.map(obj => (
  <>
    <div>{obj.title}</div>
    <div>{obj.link}</div>
    <div>{obj.category}</div>
    <div>{obj.date}</div>
    <div>{obj.id}</div>
  </>
))}

我假設這是使用 React，所以封閉的<>和</>是React.Fragment 的簡寫，它需要多個沒有外部節點的子節點。