Reactjs 未捕获类型错误:无法读取属性';当前';React Developer工具中材质UI的useStyles中的空值
我在拉维6中创建了React。在浏览器中运行程序时,控制台选项卡中没有显示错误,但如果单击React Developer Tools中的Components(组件)选项卡,这些错误将显示在控制台中:Reactjs 未捕获类型错误:无法读取属性';当前';React Developer工具中材质UI的useStyles中的空值,reactjs,laravel,material-ui,laravel-mix,Reactjs,Laravel,Material Ui,Laravel Mix,我在拉维6中创建了React。在浏览器中运行程序时,控制台选项卡中没有显示错误,但如果单击React Developer Tools中的Components(组件)选项卡,这些错误将显示在控制台中: react_devtools_backend.js:24 Uncaught TypeError: Cannot read property 'current' of null at Object.useRef (react_devtools_backend.js:24) at Object.useR
react_devtools_backend.js:24 Uncaught TypeError: Cannot read property 'current' of null
at Object.useRef (react_devtools_backend.js:24)
at Object.useRef (app.js:52209)
at useStyles (app.js:3599)
at Main (app.js:54031)
at E (react_devtools_backend.js:24)
at t.inspectHooksOfFiber (react_devtools_backend.js:24)
at Be (react_devtools_backend.js:6)
at Object.inspectElement (react_devtools_backend.js:6)
at react_devtools_backend.js:6
at t.value (react_devtools_backend.js:6)
问题可能出在使用Material UI包的这行代码中:
const classes=useStyles()代码>在main.js
文件中。因为如果我注释掉这些行,错误就消失了
我试图用main.js
中的相同代码创建一个新的create-react-app项目,如果在浏览器中运行,则不会显示错误。因此,拉拉维尔和雷克之间可能存在问题
这是我的档案:
app.js
require("./bootstrap");
require("./components/main");
import React from "react";
import ReactDOM from "react-dom";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles({
test: {
background: "red"
}
});
export default function Main() {
const classes = useStyles();
return <div className={classes.test}>Hello World</div>;
}
if (document.getElementById("app")) {
ReactDOM.render(<Main />, document.getElementById("app"));
}
components/main.js
require("./bootstrap");
require("./components/main");
import React from "react";
import ReactDOM from "react-dom";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles({
test: {
background: "red"
}
});
export default function Main() {
const classes = useStyles();
return <div className={classes.test}>Hello World</div>;
}
if (document.getElementById("app")) {
ReactDOM.render(<Main />, document.getElementById("app"));
}
}
composer.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"@babel/preset-react": "^7.0.0",
"axios": "^0.19",
"cross-env": "^7.0.2",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.13",
"react": "^16.8.0",
"react-dom": "^16.8.0",
"resolve-url-loader": "^3.1.0",
"sass": "^1.15.2",
"sass-loader": "^8.0.0"
},
"dependencies": {
"@material-ui/core": "^4.10.0",
"@material-ui/icons": "^4.9.1",
"formik": "^2.1.4",
"react-router-dom": "^5.2.0",
"react-toastify": "^6.0.5",
"yup": "^0.29.1"
}
{
"name": "laravel/laravel",
"type": "project",
"description": "The Laravel Framework.",
"keywords": [
"framework",
"laravel"
],
"license": "MIT",
"require": {
"php": "^7.2",
"fideloper/proxy": "^4.0",
"laravel/framework": "^6.2",
"laravel/passport": "^9.2",
"laravel/tinker": "^2.0"
},
"require-dev": {
"facade/ignition": "^1.4",
"fzaninotto/faker": "^1.9.1",
"laravel/ui": "^1.0",
"mockery/mockery": "^1.0",
"nunomaduro/collision": "^3.0",
"phpunit/phpunit": "^8.0"
},
"config": {
"optimize-autoloader": true,
"preferred-install": "dist",
"sort-packages": true
},
"extra": {
"laravel": {
"dont-discover": []
}
},
"autoload": {
"psr-4": {
"App\\": "app/"
},
"classmap": [
"database/seeds",
"database/factories"
]
},
"autoload-dev": {
"psr-4": {
"Tests\\": "tests/"
}
},
"minimum-stability": "dev",
"prefer-stable": true,
"scripts": {
"post-autoload-dump": [
"Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
"@php artisan package:discover --ansi"
],
"post-root-package-install": [
"@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
],
"post-create-project-cmd": [
"@php artisan key:generate --ansi"
]
}
}
编辑:我找到了错误的根本原因,那就是反应不匹配
版本16.8.0和React开发者工具版本4.7.0。我将React版本更新为16.9.0,错误消失了。我在这里找到了与我的错误相似的解决方案:
感谢您在找到解决方案后发布该解决方案。这对我很有帮助!谢谢分享布莱恩!对我来说,他们的建议是确保React和React测试呈现程序版本匹配,这确实有效!