在 React 中隐藏或显示经过身份验证的用户的按钮

Question

我想显示"成为导师"按钮，如果 1. 用户未登录。 2. 登录用户还不是导师。

否则我想显示"导师仪表板"按钮。(对于已经辅导的用户( 代码有效，但它为所有登录用户显示"Tutor DashBoard"，即使他们还没有 tutor.我希望你理解。 这是代码

//BecomeTutor to show or hide
const BecomeTutor=(props)=>{
const user=localStorage.getItem('user')
console.log("user:"+user);// this shows right user on console
if(!user){
return(  
<div>   
<a  href="NewTutorForm" onClick={()=>onCreate()}><Button 
variant="contained"
color="primary" >Become a Tutor </Button></a>
</div>
);}

else{
const check= props.tutorList.find(x=>x.UserId==user.id)
console.log("tutorList:", props.tutorList);
console.log("check:"+ check); // to show tutor on console
if ( check ){
return(  
<div>   
<a  href="TutorDashBoard" onClick={()=>tutorDashBoard(check.UserId)}><Button 
variant="contained"
color="primary" >Tutor DashBoard </Button></a>
</div>
);
}
else{
return(  
<div>   
<a  href="NewTutorForm" onClick={()=>onCreate()}><Button 
variant="contained"
color="primary" >Become a Tutor </Button></a>
</div>
); 
}
}
}

用户在控制台上的价值：

user: {"id":6,"username":"fiazranjha","email":"[e-mail]","role":"user","token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1bmlxdWVfbmFtZSI6IjYiLCJuYmYiOjE1OTA1ODM2MTMsImV4cCI6MTU5MTE4ODQxMywiaWF0IjoxNTkwNTgzNjEzfQ.J7JWakYMMAwZN02xwOOGBLsagFs_oGbqUAr1aWsGiIk"}

控制台上的导师列表的价值：

tutorList: [{…}]0: address: "1km mianwal road kuthiala sheikhan"category: "OnlineTutor"courses: []experience: "this is test"fullName: "fiaz ahmed"mobile: "03466469074"qualification: "test"tutorId: 2updatedOn: "2020-05-26T04:34:52.5088619"userId: 6username: "fiazranjha"whatsapp: "03466469074"__proto__: Objectlength: 1__proto__: Array(0)]

控制台上的检查值

check: {tutorId: 2, fullName: "fiaz ahmed", username: "fiazranjha", userId: 6, mobile: "03466469074", …}address: "1km mianwal road kuthiala sheikhan"category: "OnlineTutor"courses: []experience: "this is test"fullName: "fiaz ahmed"mobile: "03466469074"qualification: "test"tutorId: 2updatedOn: "2020-05-26T04:34:52.5088619"userId: 6username: "fiazranjha"whatsapp: "03466469074"__proto__: Object}

Answer 1

请替换

const check = props.tutorList.find(x => x.UserId == user.id)

跟

const check = props.tutorList.find(x => x.userId == user.id)

因为，导师列表持有的属性userId不UserId。您还需要更改以下函数调用

tutorDashBoard(check.UserId)

如

tutorDashBoard(check.userId)

Answer 2

发现错误.用户类型是字符串.tutorList的类型是对象。console.log("user:",typeof(user));通过JSON.pars()将用户更改为对象。感谢所有人特别@Khabir他对小写 userId 的指示也很有帮助。跟随改变就像一个魅力。

//BecomeTutor to show or hide
const BecomeTutor=(props)=>{
const user=JSON.parse(localStorage.getItem('user'))
console.log("user:",user);
if(!user){
return(  
<div>   
<a  href="NewTutorForm" onClick={()=>onCreate()}><Button 
variant="contained"
color="primary" >Become a Tutor </Button></a>
</div>
);}
else{
const check= {...props.tutorList.find(x=>x.userId==user.id)}
console.log("tutorList:", props.tutorList); // to show
console.log("check:",check); // to show
if ( check.userId ){
return(  
<div>   
<a  href="TutorDashBoard" onClick={()=>props.tutorDashBoard(check.userId,check)}><Button 
variant="contained"
color="primary" >Tutor DashBoard </Button></a>
</div>
);
}
else{
return(  
<div>   
<a  href="NewTutorForm" onClick={()=>onCreate()}><Button 
variant="contained"
color="primary" >Become a Tutor </Button></a>
</div>
); 
}
}
}