通过在 ReactJs 中循环来路由路径和组件名称

Question

这是我的路由文件编码。我必须通过从 asp.net 的后端获取详细信息来创建所有路由。在这里，我从后端正确获取详细信息。这是我的菜单列表 [Contacts, Pipelines, Stages]

import * as React from 'react';
import { BrowserRouter, Redirect, Route } from 'react-router-dom';
import { Layout,LayoutLogin } from './components/Layout';
import { Contacts } from './components/Contact';
import { Stages } from './components/Stage';
import { Pipelines } from './components/Pipeline';
import { Workspace } from './components/workspace';
import { NoMatch } from "./components/NoMatch"
import { Switch } from 'react-router';



var renderArea;

renderArea = <Layout>
    <Switch>
        <Route exact path='/' component={Workspace} />    
        <Route exact path='/Contacts' component={Contacts} />
        <Route path='/Stages' component={Stages} />
        <Route exact path='/Pipelines' component={Pipelines} />   
        <Route component={NoMatch} />

        </Switch>
    </Layout>;

export const routes = renderArea

这是我试图路由路径和组件的代码。

import * as React from 'react';
import { BrowserRouter, Redirect, Route } from 'react-router-dom';
import { Layout,LayoutLogin } from './components/Layout';
import { Contacts } from './components/Contact';
import { Stages } from './components/Stage';
import { Pipelines } from './components/Pipeline';
import { NoMatch } from "./components/NoMatch"
import { Switch } from 'react-router';

import * as axios from 'axios';

var renderArea;
let renderMenuArea;
function listOfMenus() {
    axios.default({
        method: 'post',
        url: '/Access/GetAllMenusForRoutes',
    }).then(data => {
        debugger
        if (data.data.status == 'success') {
            var listOfallMenus = data.data.listOfallMenus;
            renderMenuArea = listOfallMenus.map((menu: any) => {
                return (<Route key={menu.name} exact path={'/' + menu.name + ''} component={menu.name} />)
            })
        }
        });
    return renderMenuArea;
}



renderArea = <Layout>
    <Switch>
        <Route exact path='/' component={Workspace} />

        {this.listOfMenus()}


        <Route component={NoMatch} />

        </Switch>
    </Layout>;

export const routes = renderArea

此代码不起作用。返回函数数据总是未定义请建议我通过修改我的代码来获取返回数据，或者有什么方法可以实现我的代码目的？

Answer 1

函数listOfMenus 有一个使用axios 的异步调用。所以renderMenuArea被赋值的代码片段是axios调用的成功。由于调用是异步的，所以renderMenuArea会在axios中的promise被解析之前返回。

解决此问题的最佳方法是使用适当的状态管理框架（例如 Redux）来存储数据并有效地管理您的视图。

解决方法是通过以下方式使用async/await：

async function listOfMenus() {
    await axios.default({
        method: 'post',
        url: '/Access/GetAllMenusForRoutes',
    }).then(data => {
        debugger
        if (data.data.status == 'success') {
            var listOfallMenus = data.data.listOfallMenus;
            renderMenuArea = listOfallMenus.map((menu: any) => {
                return (<Route key={menu.name} exact path={'/' + menu.name + ''} component={menu.name} />)
            })
        }
    });
    return renderMenuArea;
}

我强烈推荐使用任何状态管理框架。