Реализация таблицы стилей в классе реакции дает ошибку правил хуков,

Question

Я пытаюсь использовать таблицу стилей в классе, который расширяет response.component, он работает в функции экспорта по умолчанию, но не при использовании класса. В функции я использую const, который определяется с помощью useStyles из stylesheed, если я делаю то же самое в классе, я получаю ошибку ловушек за нарушение правил ловушек.

Я включил картинку класса.

введите описание изображения здесь

import React, { useState } from "react";
import { withRouter } from "react-router-dom";
import {
  Paper,
  TextField,
  Select,
  Grid,
  MenuItem,
  withStyles,
  Button
} from "@material-ui/core";
import ApiCalls from "../../classes/apiCallsClass";
import queryString from "query-string";

import useStyles from "./styles";

class TicketDetails extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ticketname: "",
      description: "",
      prio: "",
      system: "",
      notes: [],
      noteText: ""
    };
  }

  displayNotes() {
    if (this.state.notes) {
      return [
        this.state.notes.map(notes => (
          <TextField
            value={notes.message}
            label="Ticket note"
            variant="outlined"
            fullWidth
            disabled
          ></TextField>
        ))
      ];
    } else {
      return [<h2>No notes were added!</h2>];
    }
  }

  addNote() {
    const value = queryString.parse(this.props.location.search);
    ApiCalls.createNote(value.id, this.state.noteText).then(val => {
      ApiCalls.getNote(value.id).then(val => {
        this.setState({ notes: val });
      });
    });
  }

  handleChangeNoteText(event) {
    this.setState({ noteText: event.target.value });
  }

  componentDidMount() {
    var self = this;
    const value = queryString.parse(self.props.location.search);
    ApiCalls.getTicket(value.id).then(val => {
      self.setState({
        ticketname: val.name,
        description: val.description,
        prio: val.priority,
        system: val.system_id
      });
    });
    ApiCalls.getNote(value.id).then(val => {
      this.setState({ notes: val });
    });
  }


  render() {
    const { classes } = this.props;

    return [

    ];
  }
}

export default withRouter(withStyles(useStyles)(TicketDetails));

Answer 1

Почему вы используете реквизиты для получения классов?

const {classes} = this.props