Javascript redux StateToProps的行为很奇怪。this.props未定义，但并不总是如此

我有一个按钮，可以编辑页面上的一些内容，我想根据用户的角色更改按钮内的文本。 该按钮有一个onClick函数，在该函数中定义了“this.props.login.role”，并按预期工作。但是当我把“this.props.login.role”放在标记之间时，它是未定义的。我不明白为什么

在其他任何地方，redux都能正常工作，因此在rootReducer或存储中都不会出现问题

这是按钮：

<button
    type="button"
    onClick={() => {
        if (
            this.props.login.role === "admin" ||
            this.props.login.role === "editor"
        ) {
            this.showDrawer();
        } else {
            toast.info("אין הרשאות", {
                position: "top-center",
                autoClose: 2500,
                hideProgressBar: false,
                closeOnClick: true,
                pauseOnHover: true,
                draggable: true,
                progress: undefined,
            });
        }
    }}
    className="btn btn-outline-warning"
>
    {this.props.login.role === "noob" ? "1" : "2"}
</button>

对我来说奇怪的是，如果我从按钮中删除动态文本，它就会工作（在onClick中仍然得到this.props，并且它不是未定义的）。明白我的意思了吧：

<button
    type="button"
    onClick={() => {
        if (
            this.props.login.role === "admin" ||   //this works right! how it is not undefined here?
            this.props.login.role === "editor"
        ) {
            this.showDrawer();
        } else {
            toast.info("אין הרשאות", {
                position: "top-center",
                autoClose: 2500,
                hideProgressBar: false,
                closeOnClick: true,
                pauseOnHover: true,
                draggable: true,
                progress: undefined,
            });
        }
    }}
    className="btn btn-outline-warning"
>
    static text // here's a static text
</button>

{
如果(
this.props.login.role==“admin”| |//这是正确的！这里怎么没有未定义？
this.props.login.role==“编辑器”
) {
这个.showDrawer（）；
}否则{
toast.info（“איןהשאות”{
位置：“上中锋”，
自动关闭：2500，
hideProgressBar:错误，
closeOnClick：没错，
pauseOnHover:是的，
真的，
进展：未定义，
});
}
}}
className=“btn btn轮廓警告”
>
静态文本//这是一个静态文本

---

我想我遗漏了一些“这个”装订的东西，但我找不到。谢谢你的帮助（：

尝试使用，所以你应该使用这个.props？.login？.role，希望它能解决你的问题

所以我发现问题是组件在加载数据（所有登录数据）之前呈现。正因为如此，出现了未定义的情况。 现在它可以工作了（我仍然不喜欢这个解决方案，但它可以工作）

{this.props.login==未定义
？“静态”
：this.props.login.role==“noob”
? "1"
: "1"}

在渲染方法中，如果将道具解构为：

const{role}=this.props.login

并使用

role

而不是

this.props.login.role

您可以获得该角色，如下所示：

...
 render() {
        const { role } = this.props.login
        return (
           
                <button
                    type="button"
                    onClick={() => {
                        if (
                            role === "admin" ||
                            role === "editor"
                        ) {
                            this.showDrawer();
                        } else {
                            toast.info("אין הרשאות", {
                                position: "top-center",
                                autoClose: 2500,
                                hideProgressBar: false,
                                closeOnClick: true,
                                pauseOnHover: true,
                                draggable: true,
                                progress: undefined,
                            });
                        }
                    }}
                    className="btn btn-outline-warning"
                >
                    {role === "noob" ? "1" : "2"}
                </button>
            
        );
    }

。。。
render（）{
const{role}=this.props.login
返回(
{
如果(
角色==“管理员”||
角色==“编辑”
) {
这个.showDrawer（）；
}否则{
toast.info（“איןהשאות”{
位置：“上中锋”，
自动关闭：2500，
hideProgressBar:错误，
closeOnClick：没错，
pauseOnHover:是的，
真的，
进展：未定义，
});
}
}}
className=“btn btn轮廓警告”
>
{role==“noob”？“1”：“2”}
);
}

这只是一种预防措施，以防止未定义。这并不能解决原始问题。仅看到jsx返回，很难看到在此

上可以访问哪些值
<button
      type="button"
      onClick={this.showDrawer}
      className="btn btn-outline-warning"
    >
      {this.props.login === undefined
        ? "static"
        : this.props.login.role === "noob"
        ? "1"
        : "1"}
    </button>

...
 render() {
        const { role } = this.props.login
        return (
           
                <button
                    type="button"
                    onClick={() => {
                        if (
                            role === "admin" ||
                            role === "editor"
                        ) {
                            this.showDrawer();
                        } else {
                            toast.info("אין הרשאות", {
                                position: "top-center",
                                autoClose: 2500,
                                hideProgressBar: false,
                                closeOnClick: true,
                                pauseOnHover: true,
                                draggable: true,
                                progress: undefined,
                            });
                        }
                    }}
                    className="btn btn-outline-warning"
                >
                    {role === "noob" ? "1" : "2"}
                </button>
            
        );
    }