React Js：在 if else 語句中獲取和錯誤行 50:20：解析錯誤：意外標記，預期“，”

Question

嘿伙計們，我對 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

這是正確的方法嗎？ 謝謝

Answer 1

您不需要圍繞 isLoggedIn 條件的 return ({ })。 你也應該測試 logState.loggedIn 而不是 loginIn

Answer 2

嘗試用三元運算符替換if ：

return loggedIn : Elem1 ? Elem2

Answer 3

Header里面好像有不必要的return ，試試這個

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

Answer 4

如果在 return 中使用 js，請嘗試使用三元運算符使用條件

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