添加useStyle变量时，ReactJS钩子调用无效

我正试图从中编写一个，但它引发了以下错误：

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;

import React，{Component}来自'React'；
从“@material ui/core/TextField”导入TextField；
导入“/App.css”；
从“../src/styleMaker”导入useStyles
从'@material ui/core/styles'导入{makeStyles}；
类应用程序扩展组件{
状态={
ssn:“”，
}
useStyles=makeStyles（主题=>({
容器：{
显示：“flex”，
flexWrap:“wrap”，
},
文本字段：{
边缘左侧：主题。间距（1），
边缘光：主题。间距（1），
宽度：200，
},
密集的：{
玛金托普：19，
},
菜单：{
宽度：200，
},
论文：{
填充：主题。间距（2），
textAlign:'中心'，
颜色：theme.palete.text.secondary，
},
按钮：{
边距：主题。间距（1），
},
}));
类=使用样式（）；
onHandleChange（事件）{
这是我的国家({
[event.target.name]：event.target.value
});
}
render（）{
返回(
this.onHandleChange（事件）}
type=“编号”
name='ssn'
margin=“正常”
className={this.classes.textField}
/>
this.onHandleChange（事件）}
type=“编号”
name='phone'
margin=“正常”
className={this.classes.textField}
/>
);
}
}
导出默认应用程序；

谁能帮我一下我的代码有什么问题吗？为什么我的代码不起作用

当我添加userStyle时，我抛出了一个错误，在这种情况下有人能帮我吗

---

我花了几个小时来解决这个问题，但现在我放弃了。任何帮助我的人都会使我高兴的。。提前感谢

您不能在基于类的组件中使用挂钩。如果要使用钩子，则需要将组件转换为功能性组件，如下所示：

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

---

不能在基于类的组件中使用挂钩。如果要使用钩子，则需要将组件转换为功能性组件，如下所示：

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

---

正如错误所暗示的那样

钩子只能在函数组件的主体内部调用

您在这里使用的是基于类的组件，您可以将基于类的组件转换为功能组件，您还需要使用useState钩子作为功能组件中的状态，您可以这样做

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

此外，当您使用功能组件时，您不能在功能组件内部使用此组件

---

希望它对您有所帮助，因为错误提示您

钩子只能在函数组件的主体内部调用

您在这里使用的是基于类的组件，您可以将基于类的组件转换为功能组件，您还需要使用useState钩子作为功能组件中的状态，您可以这样做

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

此外，当您使用功能组件时，您不能在功能组件内部使用此组件

---

希望有帮助

请添加useStyles相关代码

useStyles

（如果是钩子）只能在函数组件中调用。请添加useStyles相关代码

useStyles

（如果是钩子）只能在函数组件中调用。