使用 .map 创建列表

Question

所以基本上我有这个数据：

const testMeasurments = [
  {
  data:[
  {name:"glucose",value:6,fill:'#57c0e8'},
  {name:"SpO2",value:5,fill:"#FF6565"},
  {name:"Blood Pressure",value:4,fill:"#FFDA83"},
  {name:"Body Weight",value:2,fill:"purple"}
  ]
}
]

我想要的是根据这些数据创建一个无序列表的值。我需要的是这样的：

<ul>
{testMeasurments.map(s=>
        <li>{s.data.value}</li>
)}
</ul>

制作这个：

Answer 1

您需要遍历两个数组才能完成您想要执行的操作。

<ul>
  { testMeasurments.map(
    s => s.data.map(
      m => <li>{m.value}</li>
    )
  )}
</ul>

See it live

有时可视化数据结构会有所帮助，我喜欢使用 Typescript 来定义结构。

interface Measurement {
  data: MeasurementResult[]
}
interface MeasurementResult {
  name: string
  value: number
  fill: string
}

此处 testMeasurments 与 Measurement[] 的形式相同。含义 testMeasurments 是一组测量值。每个测量都有一个“结果”数组。那就是你想要到达的内部数组:)

使用 .map 创建列表

create list using .map

javascript

html-lists

reactjs