Javascript 如何将承诺数组提取到路由中

这是它返回路由的异步方法

export const listOfMenus = async () => {
var listOfallMenus;
await axios.default({
    method: 'post',
    url: '/Access/GetAllMenusForRoutes',
}).then(data => {

    if (data.data.status == 'success') {
        debugger
         listOfallMenus = data.data.listOfallMenus;

        renderMenuArea = listOfallMenus.map((menu: any) => {
            return (<Route key={menu} exact path={'/' + menu + ''} component={menu} />)
        })
    }
});

return renderMenuArea ;}

)

所有数据都应该附加到renderArea中。最后我希望这样

renderArea = <Layout>
<Switch>
    <Route exact path='/' component={Workspace} />
    <Route path='/Settings' component={UserSetting} />
    <Route path='/Stage' component={Stage} />
    <Route exact path='/Tag' component={Tag} />
    <Route exact path='/Cause' component={Cause} />
    <Route path='/Product' component={Product} />
    <Route exact path='/Source' component={Source} />
    <Route exact path='/Todo' component={Todo} />
    <Route exact path='/Pipeline' component={Pipeline} />
    <Route path='/Zone' component={Zone} />
    <Route path='/Todo' component={Todo} />
    <Route path='/ArchivedLeads' component={ArchivedLeads}/>*/}
    <Route exact path='/users/Login' component={Login} />
    <Route path='/Users' component={Users} />       
    <Route path='/Lead/:leadId' component={LeadDetails} />
    <Route path='/LeadContactDetails/:contactId' component={LeadContactDetails} />
    <Route component={NoMatch} />

    </Switch>
</Layout>;

renderArea=
*/}
;

它不返回承诺数组，而是返回数组的承诺（或

未定义的

，具体取决于

数据.data.status

）。等待承诺解析，然后设置状态，这将触发渲染；在渲染中，渲染这些管线

假设您从

componentDidMount

调用该函数，因此：

componentDidMount() {
    listOfMenus()
    .then(routes => {
        if (routes) {
            this.setState({routes});
        }
    })
    .catch(error => {
        // Handle error
    });
}

…并在

渲染中

：

renderArea = <Layout>
<Switch>
    <Route exact path='/' component={Workspace} />
    <Route path='/Settings' component={UserSetting} />
    {this.listOfMenus()} 
    <Route exact path='/users/Login' component={Login} />
    <Route path='/Users' component={Users} />
    <Route path='/Lead/:leadId' component={LeadDetails} />
    <Route path='/LeadContactDetails/:contactId' component={LeadContactDetails} />
    <Route component={NoMatch} />
    {this.state.routes}
</Switch>

在构造函数中

---

在

listOfMenus

中，您将显式承诺使用与

await

相结合，这在大多数情况下是不必要的；就用其中一个吧。由于您使用的是

async

函数，因此使用

wait

更清晰（在我看来）。另外，当

data.data.status

不是

成功“

时，与其让承诺解决

未定义的问题，不如让它拒绝（通过抛出错误）。这样，在使用时就不需要
if（routes）
。例如：

export const listOfMenus = async () => {
    const data = await axios.default({
        method: 'post',
        url: '/Access/GetAllMenusForRoutes',
    });

    if (data.data.status != 'success') {
        throw new Error(data.data.status);
    }

    return data.data.listOfallMenus.map((menu: any) => (
        <Route key={menu} exact path={'/' + menu + ''} component={menu} />
    );
}

我没有使用状态here@ibjas-如果组件本身是进行调用的组件，则必须。否则，您必须在组件的父级中进行调用，然后将菜单作为道具传递给组件。
this.state = {routes: []};

export const listOfMenus = async () => {
    const data = await axios.default({
        method: 'post',
        url: '/Access/GetAllMenusForRoutes',
    });

    if (data.data.status != 'success') {
        throw new Error(data.data.status);
    }

    return data.data.listOfallMenus.map((menu: any) => (
        <Route key={menu} exact path={'/' + menu + ''} component={menu} />
    );
}

componentDidMount() {
    listOfMenus()
    .then(routes => this.setState({routes}))
    .catch(error => {
        // Handle error
    });
}