开发者问题收集

无法读取 React 中未定义的属性“forEach”

2019-09-30
12037

我有下一个代码,我想用它来验证私有路由:

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} />
    );
}

但它会引发下一个错误:

./src/components/auth/private-route.js
TypeError: Cannot read property 'forEach' of undefined

我不明白为什么,但下一个代码有效:

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} />
    );
}

有人能解释一下为什么第一个版本编译失败吗?我认为两个版本都一样。

这是我调用组件的方式:

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 >
);

在控制台中我遇到了这个错误:

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

但它无法辨认:(

谢谢。

3个回答

如果您使用的是 react-scripts 版本 3.1.2 或任何高于 3.0.1 的版本,则可能需要降级到版本 3.0.1 ,因为它似乎运行良好。请参阅 github 问题

Ikechukwu Kalu
2019-10-02

这似乎是 eslint-loader 构建错误 - 请查看 这个 。尝试更新到最新版本的 eslint-loader,然后它应该可以正常工作。如果您查看 最新版本 Linter.js ,您会看到 parseResults 方法现在在调用 forEach 之前进行了 if 检查。

zhuber
2019-09-30

此错误来自 react-scriptseslint ,因此我的解决方案是禁用 eslint

  • 步骤 1: yarn add customize-cra react-app-rewired @babel/plugin-proposal-decorators --dev
  • 步骤 2:在文件 config-overrides.js 中:
const { override, disableEsLint } = require("customize-cra");        
module.exports = override(
   disableEsLint()
);
  • 步骤 3:在文件 package.json 中更新脚本:
"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build"
},
Thanh Ngo
2019-09-30