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

Question

所以我对 javascript 有点陌生， react 一般，所以我一直在练习。现在我正在尝试检索 JSON 数据并使用它来呈现多个 HTML block ，这与基本计划非常相似。例如，最初，我的 JSON 是这样格式化的

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

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

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

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

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

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

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

{this.initialize(data.saturday)}

其中data是导入的JSON Assets

但现在我想对嵌套的 JSON 数据执行相同的操作。所以它看起来像这样。所以现在不是直接制作多个事件 block 。它会制作多个时间 block ，每个时间 block 中都有多个事件 block 。

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

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

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" />