Предупреждение: функции недопустимы как дочерние элементы React в компоненте React

Question

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

РЕДАКТИРОВАТЬ: У меня есть в целях тестирования попробовал две вещи: заменив весь возврат функции GameTable просто пустым тегом, который выдал ту же ошибку, и удалив функцию cleanup() в useEffect(), и она также вызвала ту же ошибку.

Я также попытался удалить <GameTable/> из Home / index. js, и это действительно помогло устранить ошибку, поэтому я знаю, что это происходит в этом файле.

Stacktrace:

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
    in Unknown (at Home/index.js:37)
    in div (at Home/index.js:31)
    in HomePage (at withAuthorization.js:29)
    in WithAuthorization (at context.js:7)
    in Unknown (created by Context.Consumer)
    in withRouter() (created by Context.Consumer)
    in Route (at ResponsiveDrawer/index.js:159)
    in main (at ResponsiveDrawer/index.js:152)
    in div (at ResponsiveDrawer/index.js:100)
    in ResponsiveDrawer (at App/index.js:21)
    in div (at App/index.js:20)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App/index.js:19)
    in App (at withAuthentication.js:32)
    in WithAuthentication (at context.js:7)
    in Unknown (at src/index.js:23)
    in ThemeProvider (at src/index.js:22)

Вот файл, из которого исходит ошибка (GameTable / index. js):

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));

и вот как она вызывается в Home / index. js:

const HomePage = () => {
    const classes = useStyles();

    return (
        <div className={classes.root}>
            <Fab color="primary" aria-label="add" className={classes.fab}>
                <AddIcon />
            </Fab>
            <h1>Home Page</h1>
            <p>The Home Page is accessible by every signed in user.</p>
            <GameTable/>
        </div>
    );
};

Заранее спасибо.

Answer 1

Возможно, я решил это. Изменяя экспорт в конце на export default withAuthorization(withFirebase(GameTable())); (обратите внимание на добавление () после GameTable), я получаю другую ошибку, которая дает мне конкретный c номер строки внутри GameTable, что означает, что код внутри файла на самом деле выполнение, чего не было раньше. Я думаю, что новая ошибка не связана, поэтому изменение в экспорте, я думаю, решит эту проблему.