Реакция - Невозможно отобразить компоненты, используя обещание

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 .

Возможно, вы могли бы использовать функцию для возврата маршрутов вашей страницы, когда у вас есть данные секций:

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

Надеюсь, это поможет.