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

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 && (&nbsp; <span className="deletePlayerIcon">&nbsp; &nbsp;<img src="images/deleteIcon.png"/>&nbsp; </span>)}

Answer 2

我发现您正在将一个对象存储到删除图标中。所以你必须这样做&nbsp; &nbsp;{ deleteIcon.show &&(&nbsp; &nbsp; <span className="deletePlayerIcon">&nbsp; &nbsp; &nbsp; &nbsp;<img src="images/deleteIcon.png"/>&nbsp; &nbsp; </span>&nbsp; &nbsp; )}