javascript - 是摆脱 TypeError 的方法：Object(...) is not a function

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

它需要渲染这个组件。

标签： javascriptreactjsmaterial-uijsx

Answer 1

这里的问题是，您已经handleChange在组件之外编写了函数，并且您已经在组件之外声明了您的状态，例如，

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

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

根据文档，

Hooks 是 React 16.8 中的新增功能。它们让您无需编写类即可使用状态和其他 React 特性。

您的主要问题是，您使用Hooks的是class基于组件，这是错误的使用方法Hooks。ReactHooks被构建为仅与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>
    );
}