JSX сложное сравнение?

Question

[IDONTSUDO]

Я хочу рендерить некоторые вещи, на странице в зависимости от пользовательской роли. Роль юзера лежит в локальной сторе, и выдается сервером. Для того что бы понять, какая у юзера роль. Я беру, из локальной стори данные функцией isAuthenticated, и на основании тернарного выражения в jsx пытаюсь рендерить. Но он при таком сложном сравнении либо не рендерит вообще ничего. Либо, рендерит все как есть. Ниже 2 примера, выражения через && и через | |.

Когда я использую && он вообще все в false превращает и ни черта не рендерит.

Когда я использую | | он все в true превращает.

Я не понимаю в чем проблема?

export const isAuthenticated = () => {
    if (typeof window == "undefined") {
        return false
    }
    if (localStorage.getItem("jwt")) {
        return JSON.parse(localStorage.getItem("jwt"))
    } else {
        return false
    }
}

Есть такой код, функция isAuthenticated точно возвращает то что нужно.

При том, у меня есть похожий код. И он работает, но там тернарное выражение с одним сравнением.

{isAuthenticated().direct.role === "Директор" ? (
                    <Button
                      type="danger"
                      onClick={userId => this.handleClick(user._id, userId)}
                    >
                      Удалить Пользователя
                    </Button>
                    ):("")}

Answer 1

[Егор Живагин]

const userRole = isAuthenticated().direct.role;

['Директор', 'Управляющий' , 'role name'].includes(userRole) ? ...code... : ...code... ;

Правда, проблемы у вас всё равно есть. Самая очевидная - этот код падает, если юзер не авторизован и isAuthenticated возвращает false, а вы пытаетесь у этого значения свойство direct получить.

Comments

[IDONTSUDO]

Твой ответ действительно сработал так как мне надо. Спасибо огромное ты лучший!

[kostia7alania]

Я предлагаю его "проблемы" решить так :

const userRole = typeof isAuthenticated !== 'undefined' && isAuthenticated () && isAuthenticated().direct.role || []

;['Директор', 'Управляющий' , 'role name'].includes(userRole) ? 1 : 2 ;

[Егор Живагин]

kostia7alania, да это в любом случае такое себе решение - оно не читабельное, в нём дублируются вызовы isAuthenticated, внутри isAuthenticated дублируются вызовы localStorage.getItem

Если о полном решении думать, я бы куда-то в эту сторону смотрел:

... (react component)

state = { isAuthenticated: false, userRole: null };

componentDidMount() {
  this.setUser();
}

setUser = () => {
  try {
    const token = JSON.parse(localStorage.getItem("jwt"));
    const userRole = token.direct.role;

    this.setState({ isAuthenticated: true, userRole })
  } catch(err) {
    console.error(err);
  }
}

render() {
  const { isAuthenticated, userRole } = this.state;

  if (!isAuthenticated) return null;

  ... (остальная логика рендера, условия вида ['Директор', 'Управляющий' , 'role name'].includes(userRole) ? ...code... : ...code... ;
) ...

}

Правда, такие вещи как авторизацию и данные юзера лучше где-то в глобальном стейте хранить.

Answer 2

[dev null]

isAuthenticated().direct.role === 'Директор' || isAuthenticated().direct.role === 'Управляющий' ... дальше, думаю догадаетесь сами

Comments

[IDONTSUDO]

увы не спасло, минут 15 назад это пробывал. По всей видимости, какие то ограничения со стороны React.

[Егор Живагин]

IDONTSUDO, таких ограничений со стороны React нет :)
Код в этом ответе рабочий. Если проблема сохраняется, выложите пример с ней на какой-нибудь codesandbox

Answer 3

[Павел Диденко]

Вы должны каждый раз проверять результат выполнения функции, или вынесите этот результат в переменную. То есть вы ожидаете, что будет выполняться так:

{isAuthenticated().direct.role === "Директор" || isAuthenticated().direct.role === "Управляющий" || isAuthenticated().direct.role === "Бухгалтер" ? (
                    <Button
                      type="danger"
                      onClick={userId => this.handleClick(user._id, userId)}
                    >
                      Удалить Пользователя
                    </Button>
                    ):("")}

Но по факту делаете только первое сравнение, а дальше идет просто проверка на строку, и т.к. она не пустая, то всегда получаете true

И JSX тут не при делах, это вопрос к пониманию JavaScript

И еще, рендерите не пустую строку в случае false, а null

Answer 4

[davidnum95]

Код картинками это конечно сильно, ни скопировать чтобы исправить, ни указать где ошибка.

Comments

[IDONTSUDO]

подствека не нужна? Или вы думайте вам Toster JSX подстветит. При том сделает это очень коректно. При условии того что я вырываю кусок кода, из контекста.

[davidnum95]

подствека не нужна? Или вы думайте вам Toster JSX подстветит

прежде чем глупости писать, проверили бы

[kostia7alania]

davidnum95, глупости и неверные догадки - разные вещи

Answer 5

[vadimMalovaniy]

ты понимаешь что сравниваешь только одну роль? isAuthenticated().direct.role === "Директор"
"Бухгалтер" ? (<Sub>)... всегда будет true.