[英]Cannot read property 'forEach' of undefined in React
I have the next code that i want to use to validate private routing:我有下一个用于验证私有路由的代码:
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import routes from '../../routing/routes';
export default function PrivateRoute({ component: Component, ...rest }) {
// TODO: user verification
let user = 1;
const authComponentResolver = props => {
const authorizedComponent = <Component {...props} />
const redirectToAuthComponent = <Redirect to={{ pathname: routes.login.path, state: { from: props.location } }} />
if (user !== undefined) {
return authorizedComponent;
} else {
return redirectToAuthComponent;
}
}
return (
<Route {...rest} render={authComponentResolver} />
);
}
But it throws the next error:但它会引发下一个错误:
./src/components/auth/private-route.js
TypeError: Cannot read property 'forEach' of undefined
I cant understand why, but the next code works:我不明白为什么,但下一个代码有效:
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import routes from '../../routing/routes';
export default function PrivateRoute(a) {
// TODO: user verification
let user = 1;
const authComponentResolver = props => {
const authorizedComponent = <a.component {...props} />
const redirectToAuthComponent = <Redirect to={{ pathname: routes.login.path, state: { from: props.location } }} />
if (user !== undefined) {
return authorizedComponent;
} else {
return redirectToAuthComponent;
}
}
return (
<Route {...a} render={authComponentResolver} />
);
}
Can someone explain me why first version fails to compile?有人能解释一下为什么第一个版本无法编译吗? Both version do the same i think.
我认为这两个版本都一样。
Here is the way i call the component:这是我调用组件的方式:
const DashboardRoutes = () => (
<Switch>
<PrivateRoute exact path={routes.root.path} component={Dashboard} />
<PrivateRoute path={routes.dashboard.path} component={Dashboard} />
<PrivateRoute exact path={routes.persons.path} component={Persons} />
<PrivateRoute path={routes.personsNew.path} component={NewPerson} />
<PrivateRoute exact path={routes.branchOffice.path} component={BranchOffices} />
<PrivateRoute path={routes.personsNew.path} component={NewPerson} />
<PrivateRoute component={Error404} />
</Switch >
);
In the console i have this error:在控制台中我有这个错误:
VM911 main.chunk.js:116 Uncaught Error: Module build failed (from ./node_modules/eslint-loader/dist/cjs.js):
TypeError: Cannot read property 'forEach' of undefined
at Linter.parseResults (Users/groupon/Proyectos/Uselessscat/reservas-client/node_modules/eslint-loader/dist/Linter.js:121)
at Linter.printOutput (Users/groupon/Proyectos/Uselessscat/reservas-client/node_modules/eslint-loader/dist/Linter.js:85)
at cache (Users/groupon/Proyectos/Uselessscat/reservas-client/node_modules/eslint-loader/dist/cacheLoader.js:46)
at Users/groupon/Proyectos/Uselessscat/reservas-client/node_modules/loader-fs-cache/index.js:122
at Gunzip.cb (Users/groupon/Proyectos/Uselessscat/reservas-client/node_modules/loader-fs-cache/index.js:47)
at Gunzip.zlibBufferOnEnd (zlib.js:131)
at Gunzip.emit (events.js:203)
at endReadableNT (_stream_readable.js:1145)
at process._tickCallback (internal/process/next_tick.js:63)
at Object../src/components/auth/private-route.js (VM911 main.chunk.js:116)
at __webpack_require__ (VM909 bundle.js:786)
at fn (VM909 bundle.js:151)
at Module../src/routing/module-router.js (VM911 main.chunk.js:1098)
at __webpack_require__ (VM909 bundle.js:786)
at fn (VM909 bundle.js:151)
at Module../src/routing/router.js (VM911 main.chunk.js:1226)
at __webpack_require__ (VM909 bundle.js:786)
at fn (VM909 bundle.js:151)
at Module../src/index.js (VM911 main.chunk.js:787)
at __webpack_require__ (VM909 bundle.js:786)
at fn (VM909 bundle.js:151)
at Object.0 (VM911 main.chunk.js:2552)
at __webpack_require__ (VM909 bundle.js:786)
at checkDeferredModules (VM909 bundle.js:46)
at Array.webpackJsonpCallback [as push] (VM909 bundle.js:33)
at VM911 main.chunk.js:1
but it is indecipherable:(但它是无法辨认的:(
Thanks.谢谢。
If you are using react-scripts
version 3.1.2
or any above 3.0.1
, you may need to downgrade to version 3.0.1
as it seems to work fine.如果您使用
react-scripts
版本3.1.2
或任何高于3.0.1
的版本,您可能需要降级到版本3.0.1
,因为它似乎可以正常工作。 See the github issue请参阅github 问题
It seems to be eslint-loader
build error - please take a look at this .似乎是
eslint-loader
构建错误 - 请看一下这个。 Try updating to newest version of eslint-loader and then it should work.尝试更新到最新版本的 eslint-loader,然后它应该可以工作了。 If you look at latest version of
Linter.js
, you'll see that parseResults
method now has if
check before calling forEach
.如果您查看最新版本的
Linter.js
,您会看到parseResults
方法现在在调用forEach
之前进行了if
检查。
This error from eslint
of react-scripts
, so my solution is disabled eslint
.这个错误来自
react-scripts
的eslint
,所以我的解决方案是禁用eslint
。
yarn add customize-cra react-app-rewired @babel/plugin-proposal-decorators --dev
yarn add customize-cra react-app-rewired @babel/plugin-proposal-decorators --dev
config-overrides.js
:config-overrides.js
文件中:const { override, disableEsLint } = require("customize-cra");
module.exports = override(
disableEsLint()
);
package.json
:package.json
文件中的脚本:"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build"
},
I was facing the same error.我面临同样的错误。 Was having a bad time, solving this out.
过得不好,解决了这个问题。
I tried downgrading to react-scripts: 3.0.1,acc.我尝试降级到 react-scripts: 3.0.1,acc。 to some solutions on the web.
web 上的一些解决方案。 Didn't work.
没用。
What worked for me --> In my case, I observed, Webpack minified my public\index.html file.什么对我有用——>就我而言,我观察到,Webpack 缩小了我的 public\index.html 文件。
After clearing out the minified index.html and writing the regular index.html,for React.清除缩小后的索引 html 并写入常规索引 html 后,用于 React。 All the errors/issues went away.
所有的错误/问题都消失了。 And now, everything is working fine.
现在,一切正常。
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="root"></div> </body> </html>
Issues I was facing:我面临的问题:
Hope this helps.希望这可以帮助。 I love the OS community.
我喜欢操作系统社区。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.