在我的项目中使用useState后，我收到了“无效钩子调用”错误

Question

我是非常新的反应，我正在尝试实现的切换选项卡在反应使用材料用户界面。任何帮助都将不胜感激。这就是我要犯的错误

无效钩子呼叫。钩子只能在函数组件的主体内调用。这可能发生在以下原因之一: 1. app和呈现器(如React ) 2的版本可能不匹配。您可能违反了Hooks 3的规则。在同一个应用程序中可能有多个React副本。

我已经尝试过使用以下方法更新：

npx create-react-app newhook and then yarn add react@next and yarn add react-dom@next 

这就是用户useState的位置。

     render() {
        const { classes, theme } = this.props;
        const [value, setValue] = React.useState(0);
        return (some code..)
    } 

这是我的package.json文件

{
  "name": "admin-jobseeker",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.2.0",
    "@material-ui/icons": "^4.2.1",
    "node-sass": "^4.12.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1",
    "react-swipeable-views": "^0.13.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

你在混合类和钩子，参考钩子文档

钩子是React 16.8中的一种新添加物。它们允许您在不编写类的情况下使用状态和其他React特性。

// Use functions for hooks, not classes
function App(props) {
  const { classes, theme } = props;
  const [value, setValue] = React.useState(0);
  return <div>{value}</div>;
}