React-BreadCrumbs ne reprend pas la variable de la méthode

Question

J'ai une application web multi-pages fonctionnant avec reactjs. Je suis en train de définir une coutume réagir-pour une page d'ariane spécifique qui consiste à extraire une valeur et l'utilisation que dans le fil d'Ariane

L'exécution du code avec le bas, je peux voir que la console prend jobName Mais si Je regarde les miettes de pain, je suis coincé avec

home > templates > Missing name prop from Route 

Je ne comprends pas pourquoi la variable n'est pas pris pour le routeur. Si je viens de le coder en dur, ça marchera. Aucun conseil?

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> 

Answer 1

Essayez ceci s'il vous plaît;

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>) 
    } 
}