Блог

Я преобразовывал компоненты своего класса в функции, но я застрял на этой ошибке перехвата, связанной с моим экспортом по умолчанию. Я уверен, что это что-то простое, но я не могу найти ответ, который ищу.

Это код, вызывающий ошибку:

 import React from 'react'
import {AppBar, Toolbar, Button, Typography, makeStyles} from '@material-ui/core'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import Menu from './Menu'

const useStyles = makeStyles((theme) => ({
    header: {
        backgroundColor: "#1d3834",

    },
    root: {
      flexGrow: 1,
    },
    menuButton: {
      marginRight: theme.spacing(2),
    },
    title: {
      flexGrow: 1,
    },
  }))

function Header(props) {
    const classes = useStyles()

    const renderContent = () => {
        switch (props.auth) {
            case null:
                return
            case false:
                return (                  
                    <Button color="inherit" href="/signin">Sign In</Button>
                )
            default: 
                return  (
                    <Button color="inherit" href="/api/logout">Sign Out</Button>
                )
        }
    }
    
     return(
        <div className={classes.root}>
        <AppBar position="static" className={classes.header}>
            <Toolbar>
            <Menu/>
            <Typography variant="h6" className={classes.title} >
            <Link 
                to={props.auth ? '/items' : '/'} 
                className="left brand-logo"
            >
                
            </Link>
            </Typography>
                {renderContent()}
            </Toolbar>
        </AppBar>   
        </div>    
     );
    
}

function mapStateToProps({auth}) {
    return{ auth }
}

export default connect(mapStateToProps)(makeStyles(useStyles) (Header))
  

Я надеюсь, что кто-то сталкивался с подобной проблемой раньше и сможет дать мне обратную связь, спасибо 🙂

Основная проблема заключается в том, как вы export используете свой компонент. Попробуйте вместо этого выполнить следующее:

 export default connect(mapStateToProps)(Header)
  

На самом деле вам не нужна эта makeStyles(useStyles) часть.

1 предложение — не связано с вопросом:

Это предложение не связано с самим вопросом, это всего лишь небольшое улучшение того, как мне нравится организовывать makeStyles материал в моем репозитории кода с помощью Material-UI.

Обычно я создаю styles.tsx , который в вашем случае выглядел бы следующим образом, помещенный рядом с вашим файлом компонента:

 import { makeStyles } from "@material-ui/core"

const useStyles = makeStyles((theme) => ({
    header: {
        backgroundColor: "#1d3834",
    },
    root: {
      flexGrow: 1,
    },
    menuButton: {
      marginRight: theme.spacing(2),
    },
    title: {
      flexGrow: 1,
    },
}))

export default useStyles
  

Затем import в компоненте следующим образом:

 import useStyles from "./styles"
  

И использование аналогично, как в вашем компоненте:

 function Header(props) {
    const classes = useStyles()

    // ... rest of your component
}