使用useState时出现“错误：无效的钩子调用。只能在函数组件主体内部调用钩子”

Question

基于堆栈跟踪，我在useState（我相信）的组件中收到此错误：

    at resolveDispatcher (react.development.js:1590)
    at useState (react.development.js:1618)
    at GameTable (index.js:15)
    at Module../src/components/GameTable/index.js (index.js:83)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Module../src/components/Home/index.js (index.js:83)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Module../src/components/App/index.js (index.js:74)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Module../src/index.js (index.css?e32c:37)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object.1 (serviceWorker.js:137)
    at __webpack_require__ (bootstrap:785)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

我不明白为什么会发生此错误，因为正如我所说的那样，我正在使用函数内部的钩子。我已经检查了我所有的依赖关系是否都是最新的，因此不应有任何版本冲突，如React所建议的那样，并且在同一项目中我没有两个版本的React。所以我以为我违反了一些《胡扯规则》，但是我不知道我在做什么错。

我的组件在这里：

import React, { useState, useEffect } from "react";
import { withFirebase } from "../Firebase";
import TableContainer from "@material-ui/core/TableContainer";
import makeStyles from "@material-ui/core/styles/makeStyles";
import withAuthorization from "../Session/withAuthorization";
import Paper from "@material-ui/core/Paper";
import withStyles from "@material-ui/core/styles/withStyles";
import Table from "@material-ui/core/Table";
import PropTypes from 'prop-types';
import TableRow from "@material-ui/core/TableRow";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableBody from "@material-ui/core/TableBody";

function GameTable(props) {
    const [loading, setLoading] = useState(false);
    const [games, setGames] = useState([]);

    const useStyles = makeStyles({
        table: {
            minWidth: 640,
        }
    });

    useEffect(() => {
       setLoading(true);

        props.firebase.games(props.firebase.auth().currentUser.uid).on('value', snapshot => {
            const gamesObject = snapshot.val();

            const gamesList = [];
            Object.keys(gamesObject).forEach((key) => {
                gamesList.push({[key]: gamesObject[key]})
            });

            setGames(gamesList);
            setLoading(false);
        });

        return function cleanup() {
            props.firebase.games().off();
        }
    });

    const classes = useStyles();

    return (
        <TableContainer component={Paper}>
            <Table className={classes.table}>
                <TableHead>
                    <TableRow>
                        <TableCell>Date</TableCell>
                        <TableCell>Opponent</TableCell>
                        <TableCell>Goals</TableCell>
                        <TableCell>Assists</TableCell>
                        <TableCell>Points</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {games.map(game => (
                        <TableRow key={game.date}>
                            <TableCell component="th" scope="row">
                                {game.date}
                            </TableCell>
                            <TableCell align="right">{game.opponent}</TableCell>
                            <TableCell align="right">{game.goals}</TableCell>
                            <TableCell align="right">{game.assists}</TableCell>
                            <TableCell align="right">{game.points}</TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </TableContainer>
    );
}

GameTable.propTypes = {
        classes: PropTypes.object.isRequired,
};

export default withAuthorization(withFirebase(GameTable()));