我的目标是使用axios请求向对象加载数组,请参见以下代码:
function getSections() {
return axios
.get('https://localhost:44369/api/librarysections')
.then(res => res.data
.map(data => {
return ({
id: data.id,
name: data.name,
path: '/library/section/' + data.name,
component: LibraryPage
})
})
)
.then(data => data);
}
该列表将用于生成传递到我的组件的动态路由系统:
const pageRoutes = [
{
path: '/home',
name: 'Home',
component: HomePage,
icon: DashboardOutlined
},
{
collapse: true,
path: '/library',
name: 'Library',
component: LibraryPage,
icon: LibraryBooksOutlined,
views: getSections()
},
{ redirect: true, path: '/', pathTo: '/home', name: 'Home' }
];
最后映射列表以呈现组件:
<List>
{routes.map((prop, key) => {
if (prop.redirect || prop.parameter) {
return null;
}
if (prop.collapse) {
var data = Promise.resolve(prop.views);
data.then(res => {
console.log(res);
return (
<ListItem button >
<ListItemIcon >
<prop.icon />
</ListItemIcon>
<ListItemText primary={prop.name}/>
</ListItem>
)
)
}
})}
</List>
但是由于某些原因,当我退回组件时,它们不显示也不出现错误,如果我在返回中放入控制台日志,它将记录到控制台,这意味着该控制台将继续工作。
你们有什么建议吗?
答案 0 :(得分:1)
您不能在 render 方法之内使用诺言。
一旦获得了部分数据,您也许可以使用函数来返回页面路线:
const getPageRoutes = () => {
return getSections()
.then(sections =>
[
{
path: '/home',
name: 'Home',
component: HomePage,
icon: DashboardOutlined
},
{
collapse: true,
path: '/library',
name: 'Library',
component: LibraryPage,
icon: LibraryBooksOutlined,
views: sections
},
{
redirect: true,
path: '/',
pathTo: '/home',
name: 'Home'
}
]
)
}
然后,在您的组件中,在 componentDidMount 上获取路线数据,并仅在拥有数据时呈现路线:
class MyComp extends React.Component {
constructor() {
super()
this.state = {
routes: []
}
}
componentDidMount() {
getPageRoutes()
.then(routes => this.setState({ routes }))
}
render() {
return (
<List>
{this.state.routes.length &&
this.state.routes.map((prop, key) => {
if (prop.redirect || prop.parameter) {
return null;
}
if (prop.collapse) {
const data = prop.views;
return (
<ListItem button>
<ListItemIcon>
<prop.icon />
</ListItemIcon>
<ListItemText primary={prop.name}/>
</ListItem>
)
}
})
}
</List>
)
}
}
我希望这会有所帮助。