javascript - 摆脱 TypeError : Object(. ..) 的方法不是函数

Question

我正在尝试将material-ui选项卡渲染为另一个页面中的组件。当尝试使用此组件加载页面时，我不断收到此错误，我的代码在这里中断。

我尝试了两种不同的渲染方式，这直接来自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 {
...
}

根据 docs ,

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

您的主要问题是，您将 Hooks 与基于 class 的组件一起使用，这是使用 Hooks 的错误方法>。 React Hooks 构建为仅与功能 组件一起使用。

所以正确的代码可能是这样的，

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