Блог

Главная - Вопросы по программированию - React Js: получение и ошибка в инструкции if else Строка 50:20: ошибка синтаксического анализа: неожиданный токен, ожидаемый «,»

React Js: получение и ошибка в инструкции if else Строка 50:20: ошибка синтаксического анализа: неожиданный токен, ожидаемый «,»

#javascript #reactjs #rxjs

#javascript #reactjs #rxjs

Вопрос:

Эй, ребята, я очень новичок в React и следил за учебным пособием о перехватах и хотел попробовать его, я не знаю, что код правильный на данный момент, поскольку я получаю ошибку в условии оператора if для проверки состояния входа в систему. Это всплывающая ошибка.

 ./src/components/Header.js
Line 50:20:  Parsing error: Unexpected token, expected ","

  48 | 
  49 |     return (
> 50 |       {if(loggedIn === true) {
     |                    ^
  51 |         return (
  52 |           <React.Fragment>
  53 |             <CssBaseline />

Это Header.js

 import React, {useEffect, useState} from 'react';
import Link from '@material-ui/core/Link';
import AppBar from '@material-ui/core/AppBar';
import Button from '@material-ui/core/Button';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import CssBaseline from '@material-ui/core/CssBaseline';
import { makeStyles } from '@material-ui/core/styles';
import {NavLink} from 'react-router-dom';
// import Grid from '@material-ui/core/Grid';


const useStyles = makeStyles((theme) => ({
    appBar: {
        borderBottom: `1px solid ${theme.palette.divider}`,
        minHeight: 100,
        background : '#1e202c',
    },

    toolbar: {
    flexWrap: 'wrap',
    color: 'white',
    },

    toolbarTitle: {
        flexGrow: 1,
        color: 'white',

    },
    link: {
        margin: theme.spacing(1, 1.5),
    },
}))

function Header() {
    const classes = useStyles();
    const [logState, setLogState] = useState({
      loggedIn: false,
    })

    useEffect(() => {
      if (sessionStorage.getItem('jwt')) {
        setLogState({ loggedIn: true });
      }
      

    }, [setLogState]);

    return (
      {if(loggedIn === true) {
        return (
          <React.Fragment>
            <CssBaseline />
              <AppBar position="fixed" color="default" elevation={0} className={classes.appBar}>
              <Toolbar className={classes.toolbar}>
                <Typography variant="h6" color="inherit" noWrap className={classes.toolbarTitle}>
                  TestWebsite
                </Typography>
                <nav>
                  <Link component={NavLink} variant="button" color="inherit" href="#" to= "/" className={classes.link}>
                    Home
                  </Link>
                  <Link variant="button" color="inherit" href="#" className={classes.link}>
                    Accounts
                  </Link>
                </nav>
                <Button component={NavLink} href="#" color="inherit" variant="outlined" to="/logout/" className={classes.link} >
                  Logout
                </Button>
              </Toolbar>
            </AppBar>
          </React.Fragment>
          )
        } else {
          return (
            <React.Fragment>
            <CssBaseline />
              <AppBar position="fixed" color="default" elevation={0} className={classes.appBar}>
              <Toolbar className={classes.toolbar}>
                <Typography variant="h6" color="inherit" noWrap className={classes.toolbarTitle}>
                  TestWebsite
                </Typography>
                <nav>
                  
                </nav>
                <Button href="#" component={NavLink} color="inherit" variant="outlined"
                   to="/signup/" className={classes.link} >
                  SignUp
                </Button>
                <Button component={NavLink} href="#" color="inherit" variant="outlined" to="/login/" className={classes.link} >
                  Login
                </Button>
              </Toolbar>
            </AppBar>
            </React.Fragment>
            )
        }
      }
        
    )
}

export default Header

Это правильный способ сделать это?
Спасибо

Ответ №1:

Вам не нужен возврат ({ }) вокруг вашего условия isLoggedIn . Также вам следует протестировать logState.LoggedIn вместо LoggedIn

Комментарии:

1. Привет, спасибо за ответ, но теперь я получаю эту ошибку Line 49:11: 'loggedIn' is not defined no-undef .

2. Только что отредактировал мой ответ, вы должны протестировать logstate.LoggedIn вместо LoggedIn (в вашем коде нет переменной LoggedIn)

3. Можете ли вы также проверить мой код и сказать мне, почему мой оператор else не выполняется? Даже когда я выхожу из системы, он показывает тот же заголовок, что и при входе в систему. Спасибо

4. Вы привязываете useEffect к функции setLogState, что означает, что она будет запускаться только при инициализации и при изменении setLogState (скорее всего, никогда).). setLogState должен дополнительно вызываться при выходе из системы (например, после того, как действие выхода было успешно обработано вашим сервером) и при успешном входе в систему (когда сервер возвращает вам новый токен jwt)

5. Без логики входа / выхода из системы трудно сказать. Наивным способом было бы иметь метод в вашем компоненте const handleLogin = (loggedIn) => {setLogState({loggedIn})} . Затем на кнопке входа в систему, onclick={()=>handleLogin(true)} , на кнопке выхода onclick={()=>handleLogin(false)} из системы, но в более реалистичных сценариях у вас, вероятно, будут события при входе в систему и выходе из системы. В useEffect вы должны подписаться на них и соответствующим образом обновить состояние журнала. Затем useEffect должен вернуть метод, который отменяет эти подписки при размонтировании компонента

Ответ №2:

Попробуйте заменить if на троичный оператор:

 return loggedIn : Elem1 ? Elem2

Ответ №3:

Кажется, что в этом нет необходимости return Header , попробуйте это

 function Header() {
  const classes = useStyles();
  const [logState, setLogState] = useState({
    loggedIn: false,
  });

  useEffect(() => {
    if (sessionStorage.getItem("jwt")) {
      setLogState({ loggedIn: true });
    }
  }, [setLogState]);

  if (logState.loggedIn === true) {
    return (
      <React.Fragment>
        <CssBaseline />
        <AppBar
          position="fixed"
          color="default"
          elevation={0}
          className={classes.appBar}
        >
          <Toolbar className={classes.toolbar}>
            <Typography
              variant="h6"
              color="inherit"
              noWrap
              className={classes.toolbarTitle}
            >
              TestWebsite
            </Typography>
            <nav>
              <Link
                component={NavLink}
                variant="button"
                color="inherit"
                href="#"
                to="/"
                className={classes.link}
              >
                Home
              </Link>
              <Link
                variant="button"
                color="inherit"
                href="#"
                className={classes.link}
              >
                Accounts
              </Link>
            </nav>
            <Button
              component={NavLink}
              href="#"
              color="inherit"
              variant="outlined"
              to="/logout/"
              className={classes.link}
            >
              Logout
            </Button>
          </Toolbar>
        </AppBar>
      </React.Fragment>
    );
  }
  return (
    <React.Fragment>
      <CssBaseline />
      <AppBar
        position="fixed"
        color="default"
        elevation={0}
        className={classes.appBar}
      >
        <Toolbar className={classes.toolbar}>
          <Typography
            variant="h6"
            color="inherit"
            noWrap
            className={classes.toolbarTitle}
          >
            TestWebsite
          </Typography>
          <nav></nav>
          <Button
            href="#"
            component={NavLink}
            color="inherit"
            variant="outlined"
            to="/signup/"
            className={classes.link}
          >
            SignUp
          </Button>
          <Button
            component={NavLink}
            href="#"
            color="inherit"
            variant="outlined"
            to="/login/"
            className={classes.link}
          >
            Login
          </Button>
        </Toolbar>
      </AppBar>
    </React.Fragment>
  );
}

Ответ №4:

попробуйте использовать условные выражения с использованием тернарного оператора, если используете js внутри return

 conditon(if true)?<Element1/>:<Element2/>