React基于localStorage值的条件渲染异常：始终显示全部按钮

我要实现这么个逻辑：从localStorage里拿值存到isAdmin变量里，当这个值是true时，显示Update、Delete、Cancel三个按钮；当是false时，只显示Cancel按钮。但现在不管isAdmin是啥，三个按钮全显示出来了，试了两种写法都不行：

版本1代码 #

{console.log("Value of is admin:" + isAdmin)}
{isAdmin 
  ?
    <div>
      <button className="update-button" id="update_button" onClick={handleUpdate}>Update</button>
      <button className="delete-button" id="delete-button" onClick={handleDelete} >Delete</button>
      <button className="cancel-button" id="cancel-button" onClick={handleCancel} >Cancel</button>
    </div>
  : <button className="cancel-button" id="cancel-button" onClick={handleCancel} >Cancel</button>
}
</form>
)

版本2代码 #

{isAdmin && (
    <div>
      <button className="update-button" id="update_button" onClick={handleUpdate}>Update</button>
      <button className="delete-button" id="delete-button" onClick={handleDelete} >Delete</button>
    </div>
)}

<button className="cancel-button" id="cancel-button" onClick={handleCancel} >Cancel</button>
  
</form>

核心问题出在isAdmin的类型上——localStorage存的全是字符串，如果你直接用localStorage.getItem('isAdmin')拿值，得到的是"true"或"false"字符串，不是布尔值。而JS里非空字符串都会被判定为true，所以不管你存的是啥，条件判断都过了，三个按钮就都显示了。

第一步：把字符串转成布尔值 #

先正确获取isAdmin的值：

const isAdmin = localStorage.getItem('isAdmin') === 'true';

第二步：优化代码（推荐用版本2的写法，更简洁还不会重复id） #

{isAdmin && (
  <>
    <button className="update-button" id="update_button" onClick={handleUpdate}>Update</button>
    <button className="delete-button" id="delete-button" onClick={handleDelete}>Delete</button>
  </>
)}
<button className="cancel-button" id="cancel-button" onClick={handleCancel}>Cancel</button>

这样就能实现你要的效果了：isAdmin为true时显示三个按钮，为false时只显示Cancel。另外版本1里两种情况都有id为cancel-button的按钮，容易出现DOM重复id的问题，版本2的写法就没这个问题。

内容的提问来源于stack exchange，提问作者Oliver Thomaschewski