Question

我正在尝试根据用户角色呈现不同的UI，现在我仅测试一个角色，但是render方法存在问题。

首先我有这个

 <AuthUserContext.Consumer>
 { authUser => 
   authUser
   ? <NavigationAuth authUser = {authUser} />
   : <NavigationNonAuth />
 }
 </AuthUserContext.Consumer>

我检查用户是否已登录，然后在NavigationAuth上根据其角色决定要呈现的内容

render(){

this.props.authUser.getIdTokenResult()
.then((idTokenResult) => {
   if (!!idTokenResult.claims.student) {
       // eslint-disable-next-line
       console.log("I'm a student")
   return (<NavigationStudent/>);

   } else {
       // eslint-disable-next-line
       console.log("I'm not a student")
   return (<NavigationNonAuth/>);
   }
})
.catch((error) => {
  console.log(error);
  return <NavigationNonAuth/>;
});

}

但是react给我这个错误您的render方法应该有return语句我不明白为什么，因为在三个可能的选项if和else语句以及catch

上都有一个渲染器

如何更改代码以这种方式工作？

编辑：

如果我很好理解，this.props.authUser.getIdTokenResult()会重新调整一个Promise对象，那我就在做其他帖子所说的获取异步请求的解决方案，所以我尝试了

   showStudentUI() {
    console.log("I'm student on showStudentUI");
    <NavigationStudent/>
}

showSomethingUI = () =>
    <NavigationNonAuth/>

render(){
    this.props.authUser.getIdTokenResult(true) //this is a PROMISE item
    .then((idTokenResult) => {
        if (!!idTokenResult.claims.student) {
            // eslint-disable-next-line
            console.log("I'm a student")
            return this.showStudentUI();

        } else {
            // eslint-disable-next-line
            console.log("I'm not a student")
            this.showSomethingUI();
          }
     })
     .catch((error) => {
       console.log(error);
       return <NavigationNonAuth/>;
     });

   console.log("I'm nothing yet")
   return <div></div>
 }

  }

和一个学生一起，我得到以下console.logs

我什么都没有

我是学生

我是showStudentUI的学生

所以...答应解决后的回调我认为还不错，这里的问题是我的组件没有再次呈现？

我可能是错的，这是我第一次遇到asyc问题

有关getIdTokenResult的返回类型的来源：https://firebase.google.com/docs/reference/js/firebase.User#getIdTokenResult

Answer 1

我设法使其与以下代码一起使用

class NavigationAuth extends Component {
constructor(props,context) {
super(props,context);
this.state = ({value:0,gotUserRole:false});


render() {
   console.log(this.state.gotUserRole);
   console.log(this.state.value);
 if(this.state.gotUserRole === false) {
    this.props.authUser.getIdTokenResult(true) //this is a PROMISE item
    .then((idTokenResult) => {
        if (!!idTokenResult.claims.student) {
            // eslint-disable-next-line
            console.log("I'm a student")
            this.setState({value:1,gotUserRole:true})
            return <div></div>;

        } else {
            // eslint-disable-next-line
            console.log("I'm not a student")
            this.setState({value:2,gotUserRole:true})
            return <div></div>;
          }
     })
     .catch((error) => {
       console.log(error);
       this.setState({value:3,gotUserRole:true})
       return <div></div>;
     });
     return <div></div>
 }
else if(this.state.value===1) {
    console.log("Now on student value");
    return <NavigationStudent/>;
}
else if(this.state.value===2) {
    console.log("Now on admin value");
    return <NavigationAdmin/>;
}
else {
    console.log("not known role");
    return <NavigationNonAuth/>
}
}

}

如果有人知道我应该以适当的方式做到这一点，我相信这个“修复”是非常糟糕的，

使用此修复程序，我首先恢复用户角色并使用setState强制重新渲染，在2º渲染上，我仅根据用户角色渲染正确的UI

使用if / else渲染的条件渲染应具有return语句

1 个答案: