reactjs - 我是反应初学者。我在课堂上使用钩子，程序报告错误

问题描述

我是反应初学者。我在课堂上使用钩子，程序报告错误

src\page\App.js 第 41:35 行：不能在类组件中调用 React Hook “React.useState”。必须在 React 函数组件或自定义 React Hook 函数 react-hooks/rules-of-hooks 中调用 React Hooks 第 44:39 行：不能在类组件中调用 React Hook "React.useState"。React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用 react-hooks/rules-of-hooks 搜索关键字以了解有关每个错误的更多信息。

这是我的代码

import './App.css';
import React from "react";
import {BottomNavigation, BottomNavigationAction} from "@material-ui/core";
import {AccountCircle, Home, Info} from "@material-ui/icons";
import makeStyles from "@material-ui/core/styles/makeStyles";
import Grid from "@material-ui/core/Grid";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import styled from "@material-ui/core/styles/styled";


class App extends React.Component {
    render() {

        makeStyles(() => ({
            title: {
                color: "#ffffff"
            },
            toolbar: {
                background: "#3f51b5"
            },
            contents: {
                marginBottom: "100px"
            },
            bottomNavigation: {
                left: '0px',
                right: '0px',
                position: 'fixed',
                bottom: '0px',
            }
        }));
        const {classes} = this.props

        const MyGrid = styled(Grid)({
            marginTop: 10,
        });


        //切换标签选中的钩子
        const [value, setValue] = React.useState('home');

        //切换toolbar的钩子
        const [tbValue, setTbValue] = React.useState("主页");


        const handleChange = (event, newValue) => {
            setValue(newValue);
            console.log("switch" + newValue)
            //切换tb的字
            switch (newValue) {
                case 'home':
                    setTbValue("主页");
                    this.props.history.push('/home/user_login');
                    break;
                case 'info':
                    setTbValue("信息");
                    this.props.history.push('/home/info');
                    break;
                case 'me':
                    setTbValue("我的");
                    this.props.history.push('/home/me');
                    break;
            }
        };


        return (
            <div>
                <AppBar position="static" style={{left: "0", right: "0"}}>
                    <Toolbar className={classes.toolbar}>
                        <Typography className={classes.title}>
                            {tbValue}
                        </Typography>
                    </Toolbar>
                </AppBar>

                {/*内容区*/}
                <div className={classes.contents}>
                    <div>
                        <MyGrid container direction={'column'} justify={"center"}
                                alignContent={"center"}>
                            {this.props.children}
                        </MyGrid>
                    </div>
                </div>


                <BottomNavigation className={classes.bottomNavigation}
                                  value={value}
                                  onChange={handleChange} showLabels>
                    <BottomNavigationAction label="主页" value='home' icon={<Home/>}/>
                    <BottomNavigationAction label="信息" value='info' icon={<Info/>}/>
                    <BottomNavigationAction label="我的" value='me' icon={<AccountCircle/>}/>
                </BottomNavigation>

            </div>
        );
    }
}

export default App;

当我使用方法时一切正常

import './App.css';
import React from "react";
import {BottomNavigation, BottomNavigationAction} from "@material-ui/core";
import {AccountCircle, Home, Info} from "@material-ui/icons";
import makeStyles from "@material-ui/core/styles/makeStyles";
import Grid from "@material-ui/core/Grid";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import styled from "@material-ui/core/styles/styled";


function App(props) {

    makeStyles(() => ({
        title: {
            color: "#ffffff"
        },
        toolbar: {
            background: "#3f51b5"
        },
        contents: {
            marginBottom: "100px"
        },
        bottomNavigation: {
            left: '0px',
            right: '0px',
            position: 'fixed',
            bottom: '0px',
        }
    }));
    const {classes} = props

    const MyGrid = styled(Grid)({
        marginTop: 10,
    });


    //切换标签选中的钩子
    const [value, setValue] = React.useState('home');

    //切换toolbar的钩子
    const [tbValue, setTbValue] = React.useState("主页");


    const handleChange = (event, newValue) => {
        setValue(newValue);
        console.log("switch" + newValue)
        //切换tb的字
        switch (newValue) {
            case 'home':
                setTbValue("主页");
                props.history.push('/home/user_login');
                break;
            case 'info':
                setTbValue("信息");
                props.history.push('/home/info');
                break;
            case 'me':
                setTbValue("我的");
                props.history.push('/home/me');
                break;
        }
    };


    return (
        <div>
            <AppBar position="static" style={{left: "0", right: "0"}}>
                <Toolbar className={classes.toolbar}>
                    <Typography className={classes.title}>
                        {tbValue}
                    </Typography>
                </Toolbar>
            </AppBar>

            {/*内容区*/}
            <div className={classes.contents}>
                <div>
                    <MyGrid container direction={'column'} justify={"center"}
                            alignContent={"center"}>
                        {props.children}
                    </MyGrid>
                </div>
            </div>


            <BottomNavigation className={classes.bottomNavigation}
                              value={value}
                              onChange={handleChange} showLabels>
                <BottomNavigationAction label="主页" value='home' icon={<Home/>}/>
                <BottomNavigationAction label="信息" value='info' icon={<Info/>}/>
                <BottomNavigationAction label="我的" value='me' icon={<AccountCircle/>}/>
            </BottomNavigation>

        </div>
    );
}

export default App;

标签： reactjs

reactjs - 我是反应初学者。我在课堂上使用钩子，程序报告错误

问题描述

解决方案

推荐阅读