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

Question

我有一个按钮可以编辑页面上的一些内容，我想根据用户的角色更改按钮内的文本。 该按钮有一个 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>

这是redux：

function mapStateToProps(state) {
    return { home: state.home, login: state.login };
}

function mapDispatchToProps(dispatch) {
    return {
        editSwitch: (SwData, newMac) =>
            dispatch(HomeActions.EditMacAdressOfSwitch(SwData, newMac)),
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(EditSwitch);

对我来说奇怪的部分是，如果我从它工作的按钮中删除动态文本（在 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”绑定中遗漏了一些东西，但我无法理解。 感谢您的帮助 （：

Answer 1

在您的渲染方法中，如果您将 prop 解构为： 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>
            
        );
    }

Answer 2

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

<button
      type="button"
      onClick={this.showDrawer}
      className="btn btn-outline-warning"
    >
      {this.props.login === undefined
        ? "static"
        : this.props.login.role === "noob"
        ? "1"
        : "1"}
    </button>

Answer 3

尝试使用optional chaining ，所以你应该使用this.props?.login?.role ，希望它能解决你的问题