javascript - 在我的项目中使用 useState 后出现 "Invalid hook call"错误

Question

我是 React 的新手，我正在尝试使用 Material ui 在 React 中实现切换选项卡。任何帮助将不胜感激。这是我得到的错误

无效 Hook 调用。钩子(Hook)只能在函数组件的主体内部调用。这可能由于以下原因之一而发生: 1. 你可能有不匹配的 React 版本和渲染器(比如 React DOM) 2. 你可能违反了 Hooks 规则 3. 你可能在同一个应用中有多个 React 副本

我已经尝试过使用这个更新 react 和 react-dom:

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

您正在混合使用类和钩子(Hook)，refer to hook Docs

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

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