Question

这是我的路线文件编码。我必须通过从asp.net的后端获取详细信息来创建所有路由。在这里，我可以从后端正确获取详细信息。这是我的菜单列表[联系人，管道，阶段]

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调用的成功。由于调用是异步的，因此在解决axios中的承诺之前将返回renderMenuArea。

解决此问题的最佳方法是使用适当的状态管理框架（例如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;
}

我强烈建议使用任何状态管理框架。

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

1 个答案: