导入Material UI组件时，无效的挂钩调用，引用和类似问题

如何解决导入Material UI组件时，无效的挂钩调用，引用和类似问题

我在导入组件时收到很多错误：

Erros on Chrome Console

我当时想这是因为RouteWithLayout，但是我试图在单个路径中使用ChargeList组件，但是它没有用。

一些类似的问题说明了de react钩子，但是我猜我在Redux im组件中使用正确的语法。

接下来的文本是该组件的代码：

ChargeList.js

import React,{Component} from 'react';
import MaterialTable,{ MTableToolbar } from 'material-table';
import { connect} from 'react-redux';
import {listCharge} from '../../../actions/models/chargeActions';
import ResidentAddForm from '../../adminPanel/forms/ResidentAddForm';

class ChargeList extends Component {

  componentDidMount() {
    this.props.listCharge();
  }

  constructor(props) {
    super(props);
    this.state = {
      columns: [
        { title: 'Nombre del Cargo',field: 'chargeName' },]
    }; 
  }
 
  addHandleSubmit = (e) => {
    e.preventDefault();
    console.log(this.props);
  }

    render(){
   
      return(
        <MaterialTable

            options={{
            selection: true
            }}

            options={{
              exportButton: true
            }}

            title = "Lista de Cargos"
            data = {this.props.charges}
            columns = {this.state.columns}

            actions={[
              {
                icon: 'save',tooltip: 'Save User',onClick: (event,rowData) => alert("You saved " + rowData.name)
              },rowData => ({
                icon: 'delete',tooltip: 'Delete User',rowData) => confirm("You want to delete " + rowData.name),disabled: rowData.birthYear < 2000
              })
            ]}
            options={{
              actionsColumnIndex: -1
            }}

            components={{
              Toolbar: props => (
                <div >
                  <MTableToolbar {...props} />
                 <ResidentAddForm
                  href = "/charge"
                 ></ResidentAddForm>
                 
                </div>
                
              )

            }}
        >
       
        </MaterialTable>
      );
    }
}

const mapStateToProps = state => ({
    charges: Object.values(state.charges)
});

export default connect(
  mapStateToProps,{ listCharge}
)(ChargeList);

routes.js

import React from 'react';
import { Switch,Redirect,Route } from 'react-router-dom';
import RouteWithLayout from './components/RouteWithLayout/index';
import { Main as MainLayout} from './layouts'
import PropertyList from './components/models/Property/PropertyList';
import ResidentList from './components/models/Resident/ResidentList';
import SignInNew from './views/SignIn/SignInNew';
import Error from './views/Error/Error';
import Charge from './components/models/Charge/ChargeList';

const Routes = () => {
  return (
    <Switch>
      
      <RouteWithLayout
        component={PropertyList}
        exact
        layout={MainLayout}
        path="/"
      />

      <Route path="/listResident">
        <ResidentList />
      </Route>
     
      <Route path="/Charge">
        <Charge />
      </Route>

      <Route path="/error">
        <Error />
      </Route>

      <Route path="/login">
        <SignInNew />
      </Route>
     
      <Redirect to="/error" />
    </Switch>
  );
};

export default Routes;

App.js

import { Router } from 'react-router-dom'; 
import React,{ Component } from 'react';
import { createBrowserHistory } from 'history';
import Routes from './routes';
const browserHistory = createBrowserHistory();
import  theme  from './theme/index';
import { ThemeProvider } from '@material-ui/styles';

class App extends Component {

  render() {
    return (
      <ThemeProvider theme={theme}>
        <Router history={browserHistory}>
          <Routes/>
        </Router>
      </ThemeProvider>

    );
  }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from 'react-redux';
import store  from './store';

ReactDOM.render((
    <>
        <Provider store = {store}>
            <App />
        </Provider>
    </>
),document.getElementById('app'));