ReactJS Неверный вызов ловушки при добавлении переменной useStyle

Question

Я пытаюсь написать от, но он выдает мне эту ошибку:

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

Это файл App.js, где я пишу форму:

import React, { Component } from 'react';
import TextField from '@material-ui/core/TextField';
import './App.css';
import useStyles from '../src/styleMaker'

import { makeStyles } from '@material-ui/core/styles';




class App extends Component {

  state = {
    ssn: '',
  }

  useStyles = makeStyles(theme => ({
    container: {
      display: 'flex',
      flexWrap: 'wrap',
    },
    textField: {
      marginLeft: theme.spacing(1),
      marginRight: theme.spacing(1),
      width: 200,
    },
    dense: {
      marginTop: 19,
    },
    menu: {
      width: 200,
    },
    paper: {
      padding: theme.spacing(2),
      textAlign: 'center',
      color: theme.palette.text.secondary,
    },
    button: {
      margin: theme.spacing(1),
    },
  }));

  classes = useStyles();


  onHandleChange(event) {
    this.setState({
      [event.target.name]: event.target.value
    });
  }

  render() {
    return (
      <React.Fragment>
          <form noValidate autoComplete="off">
            <TextField
              id=""
              label="SSN"
              value={this.state.ssn}
              onChange={(event) => this.onHandleChange(event)} 
              type="number"
              name='ssn'
              margin="normal"
              className={this.classes.textField}
            />

            <TextField
              id=""
              label="SSN"
              value={this.state.phone}
              onChange={(event) => this.onHandleChange(event)} 
              type="number"
              name='phone'
              margin="normal"
              className={this.classes.textField}
            />

          </form>

            </React.Fragment>
          );
  }
}

export default App;

Может кто-нибудьпомогите мне, что не так с моим кодом? Почему мой код не работает?

Когда я добавляю userStyle, то выдает мне ошибку, Может ли кто-нибудь помочь мне в этом случае?

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

Answer 1

Поскольку ошибка подсказывает вам

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

Здесь вы используете компонент на основе классов, выможно преобразовать этот компонент на основе классов в функциональный компонент, вам также нужно использовать useState Hook для вашего состояния в функциональном компоненте, вы можете сделать это,

const App = () => {
  const [ssn, setSsn ] = useState('')
  const classes = useStyles()
  // remaining code
  return (
     ....
  )
} 

Также, когда вы используете функциональный компонент, вы не можете использовать это внутрифункциональный компонент

Надеюсь, это поможет

Answer 2

Вы не можете использовать хуки из компонентов на основе классов. Если вы хотите использовать хуки, вам нужно преобразовать свои компоненты в функциональные, что-то вроде следующего:

function App() {
  const classes = useStyles();
  ...
  return (
   ...
  )
}