Question

我有一个多页面的网络应用程序，它使用react-router / react-breadcrumbs（给你一个你去过的页面的踪迹。

我正在尝试设置动态面包屑，将一些数据传递给方法将返回面包屑的字符串当我导航到：

http://localhost:9001/compare/templates/2017-06-03&6277

我希望面包屑看起来像这样：

home > templates > (name of a job)

但我得到了这个：

home > templates > Missing name prop from Route

我希望页面在加载面包屑之前等待获取字符串

据我所知，这将涉及使用promise函数，await，async等（据我所知，我不能从promise函数返回值，所以我需要将结果添加到国家而不是）

对于已注释掉的所有console.log行，我可以看到数据。但最后一个console.log（在getTemplateJobName（）中），我得到一个错误，因为jobName

Uncaught TypeError: Cannot read property 'jobName' of null

我已经被困在这一段很长一段时间了，这让我非常恶心，有人可以建议吗？：'（

setStateAsync(state) {
    return new Promise((resolve) => {
        this.setState(state, resolve);
        // console.log(this.state.jobName);
    });
},

getTemplateJobName(templateId,dateChosen){ //getTemplateJobName(job){ //

    const makeRequest = async () => {
        try {
            const data = await doGetJobById({jobId: templateId,reconDate: dateChosen});
             // console.log(data)
            await this.setStateAsync({jobName: data});
            // this.setState({jobName: data});
     } catch (err) {
     console.log(err)
     }
 };
  console.log(this.state.jobName);
  //return this.state.jobName.jobName (this is the end result i want, to return the state to the route component used below)

render(){
  return (
    <div>
        <Router history={browserHistory}>
            <Route name='home' path={'/'+contextName}>
                <IndexRoute  component={LandingPage}/>
                <Route name='templates' path='templates'>
                    <IndexRoute component={JobPage}/>
                    <Route path=':reconDate&:templateId' component={JobDetailPage} staticName={true} getDisplayName={(params)=> (this.getTemplateJobName(params.templateId,params.reconDate))}/>
                </Route>
                <Route name='report' path='report' component={ReportPanel}/>
            </Route>
            <Route path='*' component={NotFoundPage}/>
        </Router>
        <ModalManager/>
        <NotificationSystem ref='notificationSystem'/>
        <ReactTooltip ref='reactTooltip' place='top' type='dark' effect='solid' />
    </div>
  )
}
});

reactjs：无法通过async / await / promise函数

0 个答案: