Javascript 显示/隐藏按钮的条件呈现-ReactJs

我试图隐藏一个菜单按钮，如果有。如果不允许用户查看菜单，我将从令牌接收一个空rol（基本上

rol:['']

），否则如果允许，则为

rol:['''u DECLARATION']

。我尝试过条件渲染，但可能我使用的方法有误。如果有人能帮忙，那将非常好

 constructor(props) {
        super(props);
        this.state = {
                roles: '' 
                     }

async componentDidMount() {
const base64Url = token.split('.')[1];
const decodedValue = JSON.parse(window.atob(base64Url))
const roles = decodedValue.roles;

 render() {
 const { roles } = this.state
    return (

        { roles 
        ? <Button className="emptyRollButtonDec"/>
        : <Button
          onClick={this.changeActiveComponent
          style= {{
              background: branding.color.colorPrimary,
              color: branding.color.colorTextPrimary
                  }}>
           Declaration
           </Button>
         }

构造函数（道具）{
超级（道具）；
此.state={
角色：“”
}
异步组件didmount（）{
const base64Url=token.split（'.'）[1]；
const decodedValue=JSON.parse（window.atob（base64Url））
const roles=decodedValue.roles；
render（）{
const{roles}=this.state
返回(
{角色
? 
: 
宣言
}

---

我不知道也不明白我错在哪里。

您已将状态中的

角色定义为零长度字符串。这意味着当您从渲染方法中的状态对其进行分解时，它已定义，而不是未定义。这意味着您无法使用现有的三元检查，因为
角色？某物：somethingelse
 检查是否定义了
角色

要更正此问题，请检查角色的长度。如果为零，则返回空按钮，否则显示活动按钮：

!roles.length ? showEmptyButton : showActiveButton

首先，确保使用
setState（）
更新组件的
角色
状态。对于组件，可以在
componentDidMount（）
生命周期挂钩中执行此操作：

/* Remove async from method signature as it's not needed */
componentDidMount() {
  const base64Url = token.split('.')[1];
  const decodedValue = JSON.parse(window.atob(base64Url))
  const roles = decodedValue.roles;

  /* Very important - this will trigger a re-render for your
  component which will ensure that the subsequent render is
  done so with the updated roles state in effect */
  this.setState({ roles : roles });
}

接下来，您需要确保基于角色的条件呈现基于组件的
角色
状态的布尔表示。正如我从您的问题中了解到的，如果
角色
状态为
'
或
[']
，则会显示空角色按钮：

render（）{
const{roles}=this.state；
/*如果角色为false，或角色数组的第一个元素
如果为false，则显示空按钮*/
常量isEmptyRole=！角色| |！角色[0]；
返回isEmptyRole？
: 
（声明）：
;
}
}
试试
！角色。角色的长度总是有定义的。角色是什么？你有什么错误吗？@Andy这是答案，如果你想写下来，我可以把它标记为正确的。谢谢你，伙计！干杯！在条件中添加角色和角色。长度==0。通过这个你还可以检查角色是否已定义，是否有一部分您的代码丢失（在componentDidMount中？）您的解释不正确。这不是因为定义了长度为0的字符串。您的ans是正确的，因为角色中的最新值是数组，并且当我们检查角色时。如果角色是从URL获取的，则长度大于真值。缺少OP代码的一部分-没有
设置状态
，其中
角色
更改为数组.我的答案是以问题为基础的。
render() {
    const { roles } = this.state;

    /* If roles is falsey, or first element of roles array 
    is falsey then show empty button */       
    const isEmptyRole = !roles || !roles[0];

    return isEmptyRole ? 
            <Button className="emptyRollButtonDec" /> : 
           (<Button
            onClick={this.changeActiveComponent}
            style={{
                background: branding.color.colorPrimary,
                color: branding.color.colorTextPrimary
            }}>Declaration</Button>) : 
           ;
    }
}