javascript - React 中嵌套数组数据如何渲染到前端页面
本文介绍了javascript - React 中嵌套数组数据如何渲染到前端页面的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
现在有后端提供的类似下面这种格式的数据
{
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>
中去了,希望高手能指点一下,十分感谢。
解决方案
已解决。
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 单独弄出来,是个误区
这篇关于javascript - React 中嵌套数组数据如何渲染到前端页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文