错误：使用 MaterialTable 时钩子调用无效

Question

我在管理面板中使用 Material Table，在 Dashboard 组件内，当我使用 Material Table 时会出现无效的钩子调用错误，如果没有 Material，应用程序运行良好。 我想要的是从 Firebase 获取反馈数据并将数据显示到材料表中。 问题是由于材料表而显示错误，但我无法理解它是如何无效的挂钩调用。我是否以错误的方式使用该材料或遗漏了什么？，请指导我。

    Here is the Dashboard Component code:

    import React from 'react';
    import AdminNavbar from '../../layout/AdminNavbar';
    import SideMenu from '../../layout/SideMenu';
    import MaterialTable from 'material-table';
    const Dashboard = () => {
        const tableCol = [
            {
                title: "Name", field: "name"
            },
            {
                title: "Course", field: "course"
            },
            {
                title: "Email", field: "email"
            },
            {
                title: "Phone", field: "phone"
            },
            {
                title: "Submitted at", field: "submit"
            }
        ];
        const tableData=[
            {
                name: "Wasim",
                course: "Web Master",
                email: "wasim@gmail.com",
                phone: 9716689303,
                submit:"01/12/2021",
                feedback:"There should be more doubt sessions."            
            },
            {
                name: "Rachna",
                course: "Graphic Master",
                email: "rachna@gmail.com",
                phone: 9547183456,
                submit:"04/12/2021",
                feedback:"More Activities"            
            }
        ];
    
        return (
            <>
                <SideMenu/>
                <AdminNavbar />
                <div className="table-div">
                     <MaterialTable title={"Student's Feedback"}
                        data={tableData}
                        columns={tableCol}
                        options={{
                            headerStyle: {
                                backgroundColor: '#01579b',
                                color: '#FFF'
                            },
                            exportButton: true,
                            selection: false,
                            search: true
                        }}
                        detailPanel={[
                            {
                                
                                tooltip: 'Show Feedback',
                                render: rowData => {
                                    return (
                                        <div
                                            style={{
                                                fontSize: 20,
                                                textAlign: 'center',
                                                color: 'black',
                                                backgroundColor: '#eaeef3',
                                            }}
                                        >
                                            {rowData.feedback}
                                        </div>
                                    )
                                },
                            }]}
                    />
                 </div>
            </>
        );
    }
    
    export default Dashboard;

在管理导航栏中，我只有徽标和用户姓名首字母。 然后管理导航栏代码如下：

import React, { Component } from 'react';
import { AppBar,  Grid, IconButton, Toolbar } from '@material-ui/core';
import logo from "../../images/admec-logo.jpg";
import { Link } from "react-router-dom";
import {  PowerSettingsNew } from '@material-ui/icons'

 class AdminNavbar extends Component {
    render() {
        return (
            <div className="header">
                <AppBar position="static" />
                 <Toolbar className="nav-head">
                <Grid container alignItems="center">
                    <Grid item  >
                        <Link to='/admin/dashboard' className='center'>
                            <img className='headerLogo' src={logo} alt='logo' />
                        </Link>
                    </Grid>
                    <Grid item sm></Grid>
                    <Grid item >
                        <div className='user-img btn btn-floating pink lighten-2'>MW</div>
                         <IconButton>
                            <PowerSettingsNew />
                        </IconButton>
                    </Grid>
                </Grid>
            </Toolbar>
            </div>
        )
    }
}
export default AdminNavbar;