使用数组对对象进行 React 循环

Question

data = [
  {
    "2017-08-09": [
      "09:00",
      "09:30",
      "10:00",
      "10:30",
      "11:00",
      "11:30",
      "13:00",
      "13:30",
      "14:00",
      "14:30",
      "15:00",
      "15:30",
      "16:00",
      "16:30"
    ]
  }
]

我试图映射这个对象数组并显示信息，如下所示：

Date 2017-08-09 
available hours 
  09:00
  09:30
  10:00
       ...

我在循环这个数据结构时遇到问题，

https://codesandbox.io/s/qzrvlvx9nj

Answer 1

Data 是一个对象数组，因此首先需要在其上使用 map，然后在对象属性值上运行循环，首先使用Object.keys或Object.entries来获取数组，然后再次在可用时间数组上使用循环。

像这样写：

{
    data.map((el,i) => (
        <div key={i}>
            Available Dates:
            {
                Object.entries(el).map(([key, value], j) => (
                    <div key={j}>
                        {key}
                        Available Times:
                        {
                            value.map(t => <div key={t}> {t} </div>)
                        }
                    </div>
                ))
            }
        </div>
    ))
}

检查工作代码：https://codesandbox.io/s/24n524ynz0

工作片段：

{
    data.map((el,i) => (
        <div key={i}>
            Available Dates:
            {
                Object.entries(el).map(([key, value], j) => (
                    <div key={j}>
                        {key}
                        Available Times:
                        {
                            value.map(t => <div key={t}> {t} </div>)
                        }
                    </div>
                ))
            }
        </div>
    ))
}

const data = [
  {
    "2017-08-09": [
      "09:00",
      "09:30",
      "10:00",
      "10:30",
      "11:00",
      "11:30",
      "13:00",
      "13:30",
      "14:00",
      "14:30",
      "15:00",
      "15:30",
      "16:00",
      "16:30"
    ]
  }
];

const App = () => (
  <div>
    <h2>JS Map</h2>
    {
      data.map((el,i) => (
        <div key={i}>
          Available Date:
          {
            Object.entries(el).map(([key, value], j) => (
              <div>
                {key}
                Available Time:
                {
                  value.map(t => <div>{t}</div>)
                }
              </div>
            ))
          }
        </div>
      ))
    }
  </div>
);

ReactDOM.render(<App />, document.getElementById("root"));