React - 用于检索 json 数据的嵌套映射

Question

所以我对javascript有点陌生，反应一般，所以我一直在练习。现在我正在尝试检索 JSON 数据并使用它来呈现多个 HTML 块，就像基本时间表一样。例如，最初，我的 JSON 是这样格式化的

{
  "saturday":[
  {
    "event": 1
  },
  {
    "event": 2
  }
 ]
}

我使用如下函数来映射 JSON 数组的每个部分

initialize = events => {
  return events.map(this.createBlock)
}

这里的 createBlock 是另一个返回以下内容的函数。

createBlock = events =>{
 return(
    <Scheduled
       event={events.event}   
    />
 );

以这种方式在渲染中调用初始化函数时它会创建两个事件块，但在这种情况下根据来自 createBlock 的各个数据只是事件编号（计划只是我格式化来自 createBlock 的数据的文件与样式一样返回）。

我在我的 jsx 中调用了所有这些

{this.initialize(data.saturday)}

其中 data 是导入的 JSON 资产

但现在我想对嵌套的 JSON 数据做同样的事情。所以它看起来像这样。所以现在不要直接制作多个事件块。它会生成多个时间块，每个时间块内部都有多个事件块。

"saturday":{
  "time":{
    "9:00": [
      {
        "event": 1
      },
      {
        "event": 2
      }
    ],
    "10:00":[
      {
        "event": 1
      },
      {
        "event": 2
      }
    ]
  }
}

我只是对如何处理这个问题感到困惑。我在考虑可能是嵌套地图，但不确定这是否实用。任何建议/帮助将不胜感激，谢谢。

Answer 1

在第一层，你有一个对象，在第二层是数组，因此为了使用 map，你需要在第一层使用Object.entries(it returns an array of arrays as key value pairs)

initialize = day => {
  return Object.entries(day.time).map(this.createBlock)
}

createBlock = ([time, events]) =>{
 return (
     <div>
        <p>{time}</p>
       {events.map(this.createEvent)}
     </div>
 );

createEvent = event =>{
 return(
    <Scheduled
       event={event.event}   
    />
 ); 

const data = {
  "saturday": {
    "time": {
      "9:00": [{
          "event": 1
        },
        {
          "event": 2
        }
      ],
      "10:00": [{
          "event": 1
        },
        {
          "event": 2
        }
      ]
    }
  }
}

const Scheduled = ({
  event
}) => {
  return <div > {
    event
  } < /div>
}

class App extends React.Component {

  initialize = day => {
    return <div > {
      Object.entries(day.time).map(this.createBlock)
    } < /div>
  }

  createBlock = ([time, events]) => {
    return ( <
        div key = {
          time
        } >
        <
        p > {
          time
        } < /p> {
        events.map(this.createEvent)
      } <
      /div>
  );
}

createEvent = event => {
  return ( <
    Scheduled key = {
      event.event
    }
    event = {
      event.event
    }
    />
  )
}


render() {
  return ( <
    div > {
      this.initialize(data.saturday)
    } <
    /div>
  )
}
}

ReactDOM.render( < App / > , document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app" />

Answer 2

当然可以使用嵌套地图。

initialize = timings => { return timings.map(this.createEvents) }

然后

createEvents = events => { return events.map(this.createBlock) }

终于

{this.initialize(data.saturday)}