1

I have a multi page web app that uses react-router / react-breadcrumbs (gives you a trail of the pages you've been to.

I'm trying to set up a dynamic breadcrumb passing some data into a method will return the string for the breadcrumb when i navigate to:

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

I'm hoping the breadcrumb will look like this:

home > templates > (name of a job)

but instead i get this:

home > templates > Missing name prop from Route

i want the page to wait for the string to be obtained before loading the breadcrumb

as far as i'm aware, this would involve using promise functions, await, async, etc (and as far as i'm aware, i can't return values from promise functions so i need to add the result to the state instead)

for all the console.log lines that were commented out, i can see the data. But the last console.log (in getTemplateJobName() ), i get an error because jobName

Uncaught TypeError: Cannot read property 'jobName' of null

I've been stuck on this for a long time, and it's been aggravating me quite badly, can anyone please advise? :'(

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>
  )
}
});
user3120554
  • 641
  • 2
  • 11
  • 21
  • the doGetJobById() does work, its used later in my code (for a different purpose). it technically works here too its just that i cant access it outside of the functions that have the commented console.log lines. This sounds like some kind of weird async scope issue??? – user3120554 Sep 06 '17 at 00:35
  • "*i can't return values from promise functions*" - you can (and should) resolve the promises that you return. (In `async function` you can even use `return` for that). "*so i need to add the result to the state instead*" - no, not really. That just adds the result to the state later. It doesn't make the state wait for the result - you cannot do that. – Bergi Sep 06 '17 at 00:46
  • @Bergi The state was only to try and pull the data (other than that i don't need state). Could you elaborate on how i would resolve the promise? e.g. doGetJobById is a promise (i'm obtaining the data through database side). if i can resolve doGetJobById, that would be much cleaner – user3120554 Sep 06 '17 at 01:57
  • The promise is already getting resolved just fine - that's why your code continues after having `await`ed it. What does not work is your `Route` calling the `getDisplayName` parameter and expecting to get the result immediately. It will need to wait. – Bergi Sep 06 '17 at 02:03
  • @Bergi, ah so what you're saying is i should pull out the route component from render and replace it with a method call which has all the promises, and once everything is resolved, it will return the route component only then? Wouldn't that cause errors since I'm pull two variables from the url which is done through the route component ? (params.templateId,params.reconDate are actually pulled from path=':reconDate&:templateId' in route component – user3120554 Sep 06 '17 at 02:07
  • @Bergi Don't i need the route component to obtain the two parameters (which will eventually pass into the promise functions, and then somehow keep the route component step pending while the promise resolves? – user3120554 Sep 06 '17 at 02:09
  • I don't know your app architecture well enough to say which function should be called where and return what, but yes: you need to do something else while the results are not yet available, and only display them once they became available asynchronously. – Bergi Sep 06 '17 at 02:15

0 Answers0