Question

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

无效的挂钩调用。挂钩只能在功能组件的主体内部调用。可能由于以下原因之一而发生： 1.您的React和渲染器版本可能不匹配（例如React DOM） 2.您可能违反了《钩子规则》 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

您正在混合类和钩子，refer to hook Docs

挂钩是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>;
}

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

1 个答案: