如何基于权限进行条件渲染

Question

我无法根据以下代码显示/隐藏delete图标。如果privilege == "ADMIN"则显示删除图标，但如果权限=="PLAYER"则将其隐藏。

那么下面的代码不起作用，

const [deleteIcon, setDeleteIcon] = useState({ show: false});

useEffect(() => {
const fetchData = async () => {
try {
const res = await Axios.get('http://localhost:8000/service/players');
setPlayerList(res.data.players);
setSearchResults(res.data.players);
const privilege = localStorage.getItem('Privilege');
console.log("Privilege logging in Front End:"+privilege);
showDeleteIcon(privilege);
} catch (e) {
console.log(e);
}
}
fetchData();
}, []);

const showDeleteIcon = (privilege) =>{
if(privilege === "ADMIN"){
setDeleteIcon({show:true})
}else{
setDeleteIcon({show:false})
}
}
{ deleteIcon &&(
<span className="deletePlayerIcon">
<img src="images/deleteIcon.png"/>
</span>
)}

Answer 1

在条件呈现语句中，您需要更深入 1 级进入deleteIcon状态对象：

{deleteIcon.show && (
<span className="deletePlayerIcon">
<img src="images/deleteIcon.png"/>
</span>
)}

Answer 2

我发现你正在将一个对象存储到deleteIcon中。所以你必须这样做

{ deleteIcon.show &&(
<span className="deletePlayerIcon">
<img src="images/deleteIcon.png"/>
</span>
)}