javascript - React - 无法使用 promise 渲染组件

Question

我的目标是使用 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>

但由于某种原因，当我返回组件时，它们不会显示，也不会收到错误，如果我将控制台日志放入返回中，它将记录到控制台，这意味着正在进入。

大家有什么建议吗？

Answer 1

您不能在 render 方法中使用这样的 Promise。

一旦获得部分数据，您也许可以使用函数返回页面路由:

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>
    )
  }
}

我希望这会有所帮助。