Тернарный оператор не работает должным образом в реакции - PullRequest
Новая
       16

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

0 голосов
/ 18 марта 2019

Итак, у меня есть компонент 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 Error

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

1 Ответ

3 голосов
/ 18 марта 2019

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, поскольку оно блокирует.

...