How to fetch data during react router transition?

Question

I want to fetch data every time a route is visited

I tried to return something in my async function but i got a promise and i need just the value for rendering

This is my fetch function i want to execute everytime a route is visited

   isLogged = async()=>{
    //return 0;
    let response = await 
            fetch(`${CONFIG.server}/getStudentLogin`,{
        method: 'GET',
        headers: {
            'Authorization': 
                             store.getState().userDataLogged.token,
            'Content-Type': 'application/json'
        }
    })
    let dataResponse = await response.json();
    console.log(dataResponse)
    if(dataResponse.status == 500){
        //console.log("xd")
        return false;
    }
    return true;
}

And this is my render function for example

  <Route exact path="/student" render={()=>(
      this.isLogged() ? (
        this.isStudent() ? (                         
          <StudentView/>
        ):(
          <TeacherView/>
        )
      ):(
        <Redirect to="/login"/>
      )
   )}/>

The problem is isLogged function return me a promise but i need to return just a value, for example true or false

user3069270 · Accepted Answer · 2019-03-31 22:15:57Z

1

In case you need to execute the promise you could simply add async before the function definition in render and then use await before the this.isLogged()

<Route exact path="/student" render={async ()=>(
      await this.isLogged() ? (
        this.isStudent() ? (                         
          <StudentView/>
        ):(
          <TeacherView/>
        )
      ):(
        <Redirect to="/login"/>
      )
   )}/>

answered Mar 31, 2019 at 22:15

user3069270

523 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Khantus Over a year ago

I got this error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

Collectives™ on Stack Overflow

How to fetch data during react router transition?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related