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

Posted 2023-03-05

【中文标题】通过在 ReactJs 中循环来路由路径和组件名称

【英文标题】：Route the path and component name by looping in ReactJs

【发布时间】：2019-04-08 19:13:02

【问题描述】：

这是我的路由文件编码。我必须通过从 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

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

【问题讨论】：

renderMenuArea 是变量而不是函数。这就是为什么this.renderMenuArea() 不起作用的原因。

对不起，我编辑了这段代码，这个也不起作用

【参考方案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;

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

【讨论】：

谢谢，如何将这个函数调用到渲染区域。它给出了这样的错误“Uncaught TypeError: this.listOfMenus is not a function”;

它不起作用。当我打印 renderArea 2: Promise <resolved>: Array(11)

在Array(11) 中提取的值。您可以放置​​调试点并通过值进行调试以提取值吗？

我不知道。我试过:(。有什么具体的方法可以提取promise数组

你可以使用回调来赋值。