Неожиданные «хуки» могут вызываться только внутри тела компонента функции - PullRequest
Новая
       28

Неожиданные «хуки» могут вызываться только внутри тела компонента функции

0 голосов
/ 11 февраля 2019

Я использую простой useState() хук в функциональном компоненте.

Когда я запускаю, я получаю сообщение об ошибке:

Хуки можно вызывать только внутри тела компонента функции

Я обновил обареагировать и реагировать на те же версии (16.8.1).

Функциональный компонент, который использует хуки: 

const AuthForm = () => {
  const [value, setValue] = useState(1);

  return (
    <Paper square>
      <Tabs
        value={value}
        indicatorColor="primary"
        textColor="primary"
        onChange={() => setValue(value)}
      >
        <Tab label="Active" />
        <Tab label="Active" />
      </Tabs>
    </Paper>
  );
};

Код, который использует AuthForm: 

import AuthForm from "./Auth/AuthForm";

const App = props => {
  return (
    <div className="container">
      <AuthForm />
      {props.children}
    </div>
  );
};

package.json: 

{
  "dependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@material-ui/core": "^3.9.2",
    "apollo-boost": "^0.1.27",
    "axios": "^0.18.0",
    "babel-loader": "^8.0.5",
    "bcrypt-nodejs": "0.0.3",
    "body-parser": "^1.16.0",
    "connect-mongo": "^2.0.3",
    "express": "^4.16.4",
    "express-graphql": "^0.7.1",
    "express-session": "^1.15.6",
    "graphql": "^14.1.1",
    "html-webpack-plugin": "^3.2.0",
    "lodash": "^4.17.4",
    "mongoose": "^5.4.11",
    "passport": "^0.4.0",
    "passport-local": "^1.0.0",
    "react": "16.8.1",
    "react-apollo": "^2.4.1",
    "react-dom": "16.8.1",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "webpack": "^4.29.3",
    "webpack-dev-middleware": "^3.5.2"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.3.0",
    "@babel/plugin-transform-react-jsx": "^7.3.0"
  }
}

webpack.config: 

const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./client/index.js",
  output: {
    path: "/",
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        use: "babel-loader",
        test: /\.jsx?$/,
        resolve: {
          extensions: [".js", ".jsx"]
        },
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "client/index.html"
    })
  ]
};

Большинство онлайн-ответов просто говорят, чтобы убедиться, что реагируют и реагируют на одну и ту же версию.Кто-нибудь еще обращался к этой проблеме недавно?

...