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

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

在条件渲染语句上，您需要深入到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>
    )}