React 中嵌套数组数据如何渲染到前端页面

Question

现在有后端提供的类似下面这种格式的数据{    status:X,     body:         [             {year: 2017, month: [December, October, ...]}             {year: 2016, month: [December, October, ...]}             {year: 2015, month: [December, October, ...]}             ...         ] }需要在 React 中渲染成<SubMenu key={year} title={<span>{year}</span>}>    <Menu.Item key={month}>{month}</Menu.Item>    <Menu.Item key={month}>{month}</Menu.Item> </SubMenu> <SubMenu key={year} title={<span>{year}</span>}>    <Menu.Item key={month}>{month}</Menu.Item>    <Menu.Item key={month}>{month}</Menu.Item> </SubMenu>...我目前可以想到的是用 map，可以做到把 year 渲染出来：    this.state = {      year: data.body.map((x) => { return x.year }),     }    const dateList = this.state.year.map((item, index) => {      return (             <SubMenu key={index} title={<span>{item}</span>}>           xxxx        </SubMenu>       )     });但是对应的 month 我不知道该如何才能渲染进不同的 <Menu.Item></Menu.Item>中去了，希望高手能指点一下，十分感谢。

Answer 1

this.setState({

  date: data.body,

});

const dateList = this.state.date.map((item) => {

  return (

    <SubMenu key={item.year} title={<span>{item.year}</span>}>

      {item.month.map((item) => {

        return (

          <Menu.Item key={item}>{item}</Menu.Item>

        )

      })}

    </SubMenu>

  )

});

之前总想着要把 year 和 month 单独弄出来，是个误区