如何在反应路由器转换期间获取数据？答案

【问题标题】：How to fetch data during react router transition?如何在反应路由器转换期间获取数据？
【发布时间】：2019-08-22 01:37:20
【问题描述】：

我想在每次访问路线时获取数据

我试图在我的异步函数中返回一些东西，但我得到了一个承诺，我只需要渲染的值

这是我每次访问路由时都想执行的获取函数

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

这是我的渲染函数，例如

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

问题是 isLogged 函数返回我一个承诺，但我只需要返回一个值，例如 true 或 false

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

如果您需要执行承诺，您只需在 render 中的函数定义之前添加 async ，然后在 this.isLogged() 之前使用 await

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

【讨论】：

我收到此错误：对象作为 React 子项无效（找到：[object Promise]）。如果您打算渲染一组子项，请改用数组。