Invalid hook call. Hooks can only be called inside of the body of a function component

问题

I am new to React and Now I would like to show some record in the table and now I got this error. Help me, please.

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See for tips about how to debug and fix this problem.

import React,{Component} from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

const useStyles = makeStyles(theme => ({
    root: {
      width: '100%',
      marginTop: theme.spacing(3),
      overflowX: 'auto',
    },
    table: {
      minWidth: 650,
    },
  }));

class allowance extends Component{
    constructor(){
        super();
        this.state={
            allowances:[],
        };

    }

    componentWillMount() {
        fetch('http://127.0.0.1:8000/allowances')
        .then(data=>{  

            return data.json();      

        }).then(data=> {          

            this.setState({allowances : data});

            console.log("allowance state",this.state.allowances);
        })

    }



    render() {
        const classes = useStyles();
        return (
            <Paper className={classes.root}>
              <Table className={classes.table}>
                <TableHead>
                  <TableRow>
                    <TableCell>Allow ID</TableCell>
                    <TableCell align="right">Description</TableCell>
                    <TableCell align="right">Allow Amount</TableCell>
                    <TableCell align="right">AllowType</TableCell>

                  </TableRow>
                </TableHead>
                <TableBody>
                  {this.state.allowances.map(row => (
                    <TableRow key={row.id}>
                      <TableCell component="th" scope="row">
                        {row.AllowID}
                      </TableCell>
                      <TableCell align="right">{row.AllowDesc}</TableCell>
                      <TableCell align="right">{row.AllowAmt}</TableCell>
                      <TableCell align="right">{row.AllowType}</TableCell>                    
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </Paper>
          );}

}

export default allowance;

回答1:

Cause you Only Call Hooks from React Functions. See more here https://reactjs.org/docs/hooks-rules.html#only-call-hooks-from-react-functions. Just convert Allowance class component to functional component. The demo working here https://codesandbox.io/s/amazing-poitras-k2fuf

const Allowance = () => {
  const [allowances, setAllowances] = useState([]);

  useEffect(() => {
    fetch("http://127.0.0.1:8000/allowances")
      .then(data => {
        return data.json();
      })
      .then(data => {
        setAllowances(data);
      })
      .catch(err => {
        console.log(123123);
      });
  }, []);

  const classes = useStyles();
  return (
    <Paper className={classes.root}>
      <Table className={classes.table}>
        <TableHead>
          <TableRow>
            <TableCell>Allow ID</TableCell>
            <TableCell align="right">Description</TableCell>
            <TableCell align="right">Allow Amount</TableCell>
            <TableCell align="right">AllowType</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {allowances.map(row => (
            <TableRow key={row.id}>
              <TableCell component="th" scope="row">
                {row.AllowID}
              </TableCell>
              <TableCell align="right">{row.AllowDesc}</TableCell>
              <TableCell align="right">{row.AllowAmt}</TableCell>
              <TableCell align="right">{row.AllowType}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Paper>
  );
};

export default Allowance;

回答2:

React linter assumes every method starting with use as hooks and hooks doesn't work inside classes. by renaming const useStyles into anything else that doesn't starts with use like const myStyles you are good to go.

Update:

makeStyles is hook api and you can't use that inside classes. you can use styled components API. see here

回答3:

You can convert class component to hooks,but Material v4 has a withStyles HOC. https://material-ui.com/styles/basics/#higher-order-component-api Using this HOC you can keep your code unchanged.

来源：https://stackoverflow.com/questions/56663785/invalid-hook-call-hooks-can-only-be-called-inside-of-the-body-of-a-function-com