如何映射对象并在对象 javascript/reactjs 中呈现数组？答案

【问题标题】：how to map over an Object and render the arrays inside the object javascript/reactjs?如何映射对象并在对象 javascript/reactjs 中呈现数组？
【发布时间】：2020-03-10 10:07:02
【问题描述】：

const data = {
    "13/11/19": [
    {patientName: "A", room: "room1", user: "k"}, 
    {patientName: "A", room: "room1", user: "k"},
  ], 
    "12/11/19": [
    {patientName: "B", room: "room8", user: "p" }, 
    {patientName: "B", room: "room8", user: "p" },
  ]
}

我有一个包含 2 个数组的数据对象。在数据对象中，我按日期对数组进行了分组。在 UI 中，我想先呈现日期为(13/11/19) 的行，然后下一行将填充患者详细信息(patientName: A)，直到有另一个患者的日期不同(12/11/19)。

如果有不同的日期，我想用新的日期添加一个新行(12/11/19) 然后呈现患者详细信息(patientName: B) 直到另一个日期等等...

我开始使用以下功能，但离这里不远。如何呈现带有日期优先和患者数组的表格？提前致谢。

Object.keys(data).map(obj => 
  console.log(obj) // gives me the date '13/11/19' & '12/11/19'

  console.log(data[obj].map(p => p)) //gives the both patient A & B

 )

UI should be 

Row 1 - 13/11/19 
Row 2 - patientName: "A", room: "room1", user: "k" 
Row 3 - patientName: "A", room: "room1", user: "k" 
Row 4 - 12/11/19 
Row 5 - patientName: "B", room: "room8", user: "p" 
Row 6 - patientName: "B", room: "room8", user: "p

【问题讨论】：

那么你想创建六行，基本上？
是 @ChrisG 第 1 行 - 19 年 13 月 11 日第 2 行 - 患者姓名：“A”，房间：“room1”，用户：“k” 第 3 行 - 患者姓名：“A”，房间： “room1”，用户：“k”第 4 行 - 19 年 12 月 11 日第 5 行 - 患者姓名：“B”，房间：“room8”，用户：“p”第 6 行 - 患者姓名：“B”，房间：“room8” "，用户："p"

标签： javascript reactjs return

【解决方案1】：

试试这个：

Object.entries(data).map(([date, patients]) => (
  <div key={date}>
    <h1>{date}</h1>
    <ul>
      {patients.map((patient, i) => (<li key={i}>Patient Name: {patient.patientName}</li>)}
    </ul>
  </div>
))

【讨论】：

patients.map 不是函数。患者参数是索引。这不起作用
非常感谢它的工作。我明白它是如何工作的。但我没有意识到你可以使用 object.entries 来实现这一点。特别是 (([date, patients])) 论点对我来说是新事物。