Uncaught Invariant Violant: Неверный вызов ловушки. Проблема в реализации класса React - PullRequest
Новая
       1

Uncaught Invariant Violant: Неверный вызов ловушки. Проблема в реализации класса React

1 голос
/ 19 июня 2019

Я реализовывал класс React для вкладок пользовательского интерфейса материала. Я по существу взял пример вкладок с веб-сайта пользовательского интерфейса материала и преобразовал в совместимый с классом формат. Пример на их сайте ниже: 

import React from 'react';
import PropTypes from 'prop-types';
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,
    backgroundColor: theme.palette.background.paper,
  },
}));

export default function SimpleTabs() {
  const classes = useStyles();
  const [value, setValue] = React.useState(0);

  function handleChange(event, newValue) {
    setValue(newValue);
  }

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Tabs value={value} onChange={handleChange}>
          <Tab label="Item One" />
          <Tab label="Item Two" />
          <Tab label="Item Three" />
        </Tabs>
      </AppBar>
      {value === 0 && <TabContainer>Item One</TabContainer>}
      {value === 1 && <TabContainer>Item Two</TabContainer>}
      {value === 2 && <TabContainer>Item Three</TabContainer>}
    </div>
  );
}

Это мой код перевода в стиле классов React. 

import React from 'react'
import PropTypes from 'prop-types';
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';
import MaterialTableDemo from './Table';
import Chart from './Chart';

// Define the styling of the tab component. The background of the
// displayed content is defined to be the paper color.
const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper,
  },
}));

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

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


class Main extends React.Component {
  constructor(props) {
    // Inherit whatever props are given to it in the tag definition
    super(props);
    // Declaration of the state variable if needed
    this.state =  {
      displayState: 0, // define the beginning state of the
      // tab component
    };
    // Declaration of some member functions, some of whic
    // return render-able HTML format code.
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(newValue) {
    this.setState( { displayState: newValue } )
  }

  // propTypes method only for debugging purposes.
  // Will check for any inconsistencies. If a prop is required to be
  // a node, but is not a node, will raise a warning/error.


  render() {
    const classes = useStyles();
    return (
      <div className={classes.root}>
        <AppBar position="static" >
          <Tabs value={this.state.displayState} onChange={this.handleChange}>
            <Tab label="Chart" />
            <Tab label="Table" />
          </Tabs>
        </AppBar>
        {this.state.displayState === 0 && <TabContainer> <Chart/> </TabContainer>}
        {this.state.displayState === 1 && <TabContainer> <MaterialTableDemo/> </TabContainer>}
      </div>
    );
  }
}
export default Main;

Я хочу, чтобы это запустилось и показывало вкладку с нужным содержимым внутри. и на данный момент это просто фиктивные компоненты, отображающие текст.

Текущая ошибка 

Uncaught Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See [website deleted] for tips about how to debug and fix this problem.

Ответы [ 2 ]

0 голосов
/ 19 июня 2019

Как указано в предоставленном вами исключении:

Хуки могут вызываться только внутри тела компонента функции

Это, конечно, означает, что использованиеперехватчики внутри компонента класса не поддерживаются.

0 голосов
/ 19 июня 2019

Ошибка возникает из-за того, что useStyles() имеет makeStyles с react-hook и вы не можете использовать react-hooks в компонентах класса. И, как вы можете видеть на примере, он использует функциональные компоненты. 

render() {
    const classes = useStyles(); // here is a react-hook that can't be used in class components
    return (
...