Блог

У меня есть кнопка, которая редактирует некоторые вещи на странице, я хочу изменить текст внутри кнопки в соответствии с ролью пользователя. кнопка имеет функцию 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>
  

Вот сокращение:

 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);
  

Странная часть для меня заключается в том, что если я удаляю динамический текст из кнопки, он работает (все еще есть this.props в onClick, и он не определен). смотрите здесь, что я имею в виду :

 <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», но я не могу ее получить. спасибо за вашу помощь (:

В вашем методе рендеринга, если вы деконструируете 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>
            
        );
    }
  

Итак, я обнаружил, что проблема заключается в том, что компонент отображается до загрузки данных (всех данных для входа). и из-за этого происходит неопределенное. теперь это работает (мне все еще не нравится это решение, но оно работает).

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

Попробуйте использовать необязательную цепочку, поэтому вы должны использовать this.props?.login?.role, надеюсь, это решит вашу проблему