React-BreadCrumbs 不会从方法中获取变量答案

【问题标题】：React-BreadCrumbs does not pick up variable from methodReact-BreadCrumbs 不会从方法中获取变量
【发布时间】：2018-02-12 12:23:21
【问题描述】：

我有一个使用 reactjs 运行的多页 Web 应用程序。我正在尝试为特定页面定义自定义反应面包屑这涉及提取一个值并在面包屑中使用它

使用下面的代码运行代码，我可以看到控制台选择了 jobName 但是如果我看面包屑，我会被困住

home > templates > Missing name prop from Route

我不太明白为什么没有为路由器拾取变量。如果我只是硬编码它，它将起作用。有什么建议吗？

getTemplateJobName(templateId,dateChosen){
    doGetJobById({jobId: templateId,reconDate: dateChosen}).then(
    ({body: template})=>{ 
        let {jobName: jobName}=template;
        console.log(jobName);
        return jobName;
    });
},

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>

【问题讨论】：

您没有返回 getDisplayName 属性上的值。试试getDisplayName={ (params) => ( this.getTemplateJobName(params.templateId,params.reconDate) )}
@bennygenel 似乎没有什么可悲的。仍然打印到控制台，但在面包屑中看不到它（主页 > 模板 > Route 中缺少名称道具）
会不会是promise函数不正确？
@bennygenel 也许是关于同步与异步的？
是的。肯定是因为这个。我的错。我错过了承诺功能。您可以设置状态值而不是返回值，并将 getDispalayName 属性设置为该状态值。

标签： javascript reactjs npm react-router breadcrumbs

【解决方案1】：

请试试这个；

export default App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      DisplayName: ''
    };
  }

  getTemplateJobName(templateId,dateChosen) {
    doGetJobById({jobId: templateId,reconDate: dateChosen}).then(
      ({body: template})=>{ 
        let {jobName: jobName}=template;
        console.log(jobName);
        // return jobName; 
        this.setState({ DisplayName: jobName });
      }
    );
  }

  getDisplayName(params) {
    this.getTemplateJobName(params.templateId,params.reconDate);
    return this.state.DisplayName;
  }


  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={ this.getDisplayName.bind(this) }/>
          </Route>
          <Route name='report' path='report' component={ReportPanel}/>
        </Route>
        <Route path='*' component={NotFoundPage}/>
      </Router>
    </div>)
  }
}

【讨论】：