将类转换为函数React Error无效的钩子调用

debugcn 发表于 Dev

Erykj97

我一直在将类组件转换为函数，但由于发生钩子错误，我无法使用导出默认值。我敢肯定这很简单，但找不到所需的答案。

错误截图

这是导致错误的代码：

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
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-04-5

我来说两句

0条评论

登录后参与评论

来自分类Dev

将React中的类基础组件转换为钩子

来自分类Dev

用Jest模拟React HOC时出现“无效的钩子调用”

来自分类Dev

如何修复React（TypeScrtipt）错误“无效的钩子调用”？

来自分类Dev

React + Antd + Rollup组件库“错误：无效的钩子调用。只能在函数组件主体内部调用钩子”

来自分类Dev

如何将C ++类转换为托管类并在其中调用纯虚函数？

来自分类Dev

在函数内调用时为什么会出现“错误：无效的钩子调用”？

来自分类Dev

在 Python 中，如何将类/函数的调用转换为字符串？

来自分类Dev

无效的Hook调用，从函数到类的转换

来自分类Dev

将字符向量转换为函数调用

来自分类Dev

react.js - react-alert - 未捕获的不变违规：无效的钩子调用

来自分类Dev

使用钩子将Modal类组件转换为功能组件

来自分类Dev

使用钩子将类组件转换为功能组件

来自分类Dev

如何解决React Native中的无效钩子调用错误

来自分类Dev

React钩子被乱序调用

来自分类Dev

函数调用转换列表是将字母字符转换为数字

来自分类Dev

将函数数组转换为嵌套函数调用

来自分类Dev

NodeJS 将顺序函数调用转换为函数数组

来自分类Dev

将字符串列表转换为函数调用

来自分类Dev

将字符串转换为函数调用

来自分类Dev

将字符串转换为Angular中的函数调用

来自分类Dev

将函数调用转换为R中的字符

来自分类Dev

将需要回调的函数调用转换为协程

来自分类Dev

grunt.js-将concat javascripts转换为函数调用

来自分类Dev

将函数转换为宏后的宏调用问题

来自分类Dev

将php转换为javascript，自调用函数

来自分类Dev

调用重载函数时将int转换为double

来自分类Dev

将函数调用转换为Expression C＃

来自分类Dev

将Arrow函数转换为React.js中的类

来自分类Dev

为什么将 React 类组件转换为具有钩子的功能组件，而不是在文档的事件处理程序中获取状态

Related 相关文章

文章