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

Question

我无法根据以下代码显示/隐藏图标。如果 然后显示删除图标，但如果权限 == “PLAYER”，则将其隐藏。deleteprivilege == "ADMIN"然后下面的代码不起作用，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.show &&(

    <span className="deletePlayerIcon">

       <img src="images/deleteIcon.png"/>

    </span>

    )}