警告:函数在React组件中作为React子元素无效 [英] 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.

出于测试目的，我尝试了两件事:用一个空标签替换GameTable函数的整个返回值，这会产生相同的错误；并删除useEffect()中的cleanup()函数，并且还会产生同样的错误.

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.

我还尝试从Home/index.js中删除<GameTable/>，并且确实删除了错误，所以我知道该文件中正在发生这种情况.

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:

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)的文件:

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

这是在Home/index.js中的调用方式:

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

谢谢.

推荐答案

我可能已经解决了这个问题.通过将导出更改为export default withAuthorization(withFirebase(GameTable()));(注意在GameTable之后添加了())，我得到了一个不同的错误，该错误为我提供了GameTable内部的特定行号，这意味着文件内的代码实际上正在执行，以前不是这种情况.我认为新的错误是无关紧要的，因此，我相信出口的变化将解决此问题.

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.

这篇关于警告:函数在React组件中作为React子元素无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！