我在功能组件中使用了一个简单的useState()
钩子。
我跑步时收到一条错误消息:
只能在函数组件的主体内部调用钩子
我已将react&react-dom都更新为相同版本(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"
})
]
};
大多数在线答案只是为了确保react和react-dom在同一版本上。最近还有其他人遇到这个问题吗?