Является ли способ избавиться от TypeError: Object (...) не является функцией

Question

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

Я пробовал 2 разных способа рендеринга, это идет прямо из Material-UI. он работает в песочнице, но при сборке он не рендерится.

import React from "react";
// nodejs library that concatenates classes
import classNames from "classnames";
// nodejs library to set properties for components
import SwipeableViews from "react-swipeable-views";

// @material-ui/core components
import PropTypes from 'prop-types';
import withStyles from "@material-ui/core/styles/withStyles";
// @material-ui/icons
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';


function TabContainer(props) {
  return (
    <Typography component="div" style={{ padding: 8 * 3 }}>
      {props.children}
    </Typography>
  );
}

TabContainer.propTypes = {
  children: PropTypes.node.isRequired,
};

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
    width: '100%',
    backgroundColor: theme.palette.background.paper,
  },
}));
const handleChange = (event, newValue) => {
  setValue(newValue);
}

const [value, setValue] = React.useState(0);

class DetailPills extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      active: props.active
    };
    this.handleChange = this.handleChange.bind(this)
  }



  render() {
    const classes = useStyles();
    return (
      <div>
          <Tabs
            value={value}
            onChange={handleChange}
            indicatorColor="transparent"
            textColor="primary"
          >
            <Tab className="btn btn-blk btn-pill" label="Identity Checks" active />
            <Tab className="btn btn-blk btn-pill" label="Academic Qualifications" />
            <Tab className="btn btn-blk btn-pill" label="Credit Checks" />
            <Tab className="btn btn-blk btn-pill" label="Criminal Checks" />
            <Tab className="btn btn-blk btn-pill" label="Employment Checks" />
            <Tab className="btn btn-blk btn-pill" label="Enatis Checks" />
          </Tabs>
          <div className="tab-content">
        {value === 0 && 
        <TabContainer className="screening-items">
            Test
        </TabContainer>}
        {value === 1 && 
        <TabContainer className="screening-items">
            Second info
        </TabContainer>}
        {value === 2 && <TabContainer className="screening-items">Item Three</TabContainer>}
        {value === 3 && <TabContainer className="screening-items">Item Four</TabContainer>}
        {value === 4 && <TabContainer className="screening-items">Item Five</TabContainer>}
        {value === 5 && <TabContainer className="screening-items">Item Six</TabContainer>}
        {value === 6 && <TabContainer className="screening-items">Item Seven</TabContainer>}
        </div>
      </div>
    );
  }

}

export default withStyles(DetailPills);

Это необходимо для рендеринга этого компонента.

Answer 1

Здесь проблема в том, что вы написали свою handleChange функцию вне компонента, также вы объявили свое состояние вне компонента, как,

const handleChange = (event, newValue) => {
  setValue(newValue);
}

const [value, setValue] = React.useState(0);
class DetailPills extends React.Component {
...
}

Согласно документам ,

Крючки - это новое дополнение в React 16.8. Они позволяют вам использовать состояние и другие возможности React без написания класса.

Ваша основная проблема - , вы используете Hooks с компонентом на основе class, что является неправильным подходом к использованию Hooks. React Hooks предназначен для использования только с компонентом functional.

Таким образом, правильный код может быть таким,

function DetailPills(props) {
    const [active, setActive] = React.useState(props.active);
    const [value, setValue] = React.useState(0);
    const handleChange = (event, newValue) => {
        setValue(newValue);
    }
    const classes = useStyles();

    return (
        <div>
          <Tabs
            value={value}
            onChange={handleChange}
            indicatorColor="transparent"
            textColor="primary"
          >
            <Tab className="btn btn-blk btn-pill" label="Identity Checks" active />
            <Tab className="btn btn-blk btn-pill" label="Academic Qualifications" />
            <Tab className="btn btn-blk btn-pill" label="Credit Checks" />
            <Tab className="btn btn-blk btn-pill" label="Criminal Checks" />
            <Tab className="btn btn-blk btn-pill" label="Employment Checks" />
            <Tab className="btn btn-blk btn-pill" label="Enatis Checks" />
          </Tabs>
          <div className="tab-content">
        {value === 0 && 
        <TabContainer className="screening-items">
            Test
        </TabContainer>}
        {value === 1 && 
        <TabContainer className="screening-items">
            Second info
        </TabContainer>}
        {value === 2 && <TabContainer className="screening-items">Item Three</TabContainer>}
        {value === 3 && <TabContainer className="screening-items">Item Four</TabContainer>}
        {value === 4 && <TabContainer className="screening-items">Item Five</TabContainer>}
        {value === 5 && <TabContainer className="screening-items">Item Six</TabContainer>}
        {value === 6 && <TabContainer className="screening-items">Item Seven</TabContainer>}
        </div>
      </div>
    );
}