Троичный оператор не работает должным образом в react

#javascript #reactjs #if-statement #ternary-operator

#javascript #reactjs #if-оператор #тернарный оператор

Вопрос:

Итак, у меня есть компонент под названием PrivateRoute.js, который в основном защищает некоторые маршруты и перенаправляет пользователя на страницу входа, если они не вошли в систему, я хотел бы отобразить предупреждающее сообщение внутри троичного оператора, мое предупреждение проходит, но через несколько секунд я получаю сообщение об ошибке

PrivateRoute

 function PrivateRoute({ component: Component, ...rest }) {
    return ( 
      <Route
        {...rest}
        render={props =>
        /*If "IsLoggedIn" is located inside the local storage(user logged in), then render the component defined by PrivateRoute */
            localStorage.getItem("IsLoggedIn")  ? (
            <Component {...props} />
          ) : alert('You must be logged in to do that!') (  //else if there's no authenticated user, redirect the user to the signin route 
            <Redirect 
              to='/signin' 
            /> 
          ) 
        }
      />
    );
  }

это ошибка, которую я получаю в react:

Как мне отобразить предупреждение внутри троичного оператора без получения этой ошибки?

1. У вас есть alert("message")(<component />) . Итак, он собирается вызвать то, что alert возвращает, alert а затем попытаться вызвать то, что возвращает. Но вызов alert просто дает вам undefined то, что не может быть вызвано. Ничего общего с React.

2. Происходит, когда вы не используете точки с запятой…. Ваш код в основном var foo = alert('x'); foo(<render>)

Ответ №1:

JavaScript видит, alert(...) (...) как будто вы хотите вызвать возвращаемое значение alert как функцию, но alert не возвращает функцию. Вот о чем говорит ошибка.

Если вы хотите последовательно вычислить несколько выражений, вы можете использовать оператор запятой:

 condition ? case1 : (alert('some message'), <Redirect ... />)
//                  ^                     ^                 ^

Вы можете добиться того же, переместив alert вызов перед return оператором, что также упрощает ваш код:

 render() {
  const isLoggedIn = localStorage.getItem("IsLoggedIn");
  if (!isLoggedIn) {
    alert(...);
  }

  return <Route ... />;
}

Обратите внимание, что localStorage хранятся только строковые значения, поэтому вам, вероятно, потребуется преобразовать возвращаемое значение localStorage.getItem("IsLoggedIn") в фактическое логическое значение.

Сказав все это, обратите внимание, что вам следует избегать использования alert , поскольку это блокирует.