Warning: Functions are not valid as a React child in React component

问题

I am getting this error in one of my components and I'm not able to figured out why. I understand that a lot of people have had this issue when they return a reference to a function instead of actually calling it, but as far as I can tell, that isn't my issue.

EDIT: I have tried two things for testing purposes: replacing the entire return of the GameTable function with just an empty tag, which produced the same error, and deleting the cleanup() function in useEffect() and it also produced the same error.

I also tried removing the <GameTable/> from Home/index.js and that did remove the error, so I know it's happening in that file.

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)

Here is the file the error is coming from (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));

and here is how it's being called in 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>
    );
};

Thanks in advance.

回答1:

I may have solved this. By changing the export at the end to export default withAuthorization(withFirebase(GameTable())); (notice the added () after GameTable), I get a different error that gave me a specific line number inside of GameTable, which means the code inside the file is actually executing, which wasn't the case before. The new error is unrelated I think, so the change in the export will, I believe, solve this issue.

来源：https://stackoverflow.com/questions/59705437/warning-functions-are-not-valid-as-a-react-child-in-react-component

标签

reactjs

material-ui