如何修复 ReactJS 中的“递归过多”错误？答案

【问题标题】：How do I fix a "too much recursion" error in ReactJS?如何修复 ReactJS 中的“递归过多”错误？
【发布时间】：2016-08-25 08:16:43
【问题描述】：

我正在尝试为我的 Web 应用程序创建一个 NavBar。当我打开index.html 时，什么都没有加载。当我在 Firefox 中检查 Web 控制台时，它给了我这个错误：

too much recursion 如果我点击它，它会给我这个；

require<[357]</</ReactCompositeComponentMixin.getName() vendors.js:29036
getDeclarationErrorAddendum() vendors.js:33167
checkPropTypes() vendors.js:33322
validatePropTypes() vendors.js:33342
require<[385]</</ReactElementValidator.createElement() vendors.js:33376
render()
require<[357]</</ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext() vendors.js:28968
require<[357]</</ReactCompositeComponentMixin._renderValidatedComponent() vendors.js:28988
require<[404]</</ReactPerf.measure/wrapper() vendors.js:35387
require<[357]</</ReactCompositeComponentMixin.performInitialMount() vendors.js:28573
require<[357]</</ReactCompositeComponentMixin.mountComponent() vendors.js:28526
require<[404]</</ReactPerf.measure/wrapper() vendors.js:35387
require<[409]</</ReactReconciler.mountComponent() vendors.js:36055
require<[398]</</ReactMultiChild.Mixin.mountChildren() vendors.js:34750

这个错误有更多行，但我希望前几行有助于识别问题，如果需要更多，请告诉我。我也在 Chrome 上试过这个，它给了我Error: Maximum call stack size exceeded。

对于任何想知道vendor.js 和bundle.js 是什么的人，它们是gulp 一起构建我的javascript 文件的结果。

我认为问题是由于某处的无限循环而发生的，但我没有使用任何循环，所以我认为问题源于我的 Nav.js 文件，这是我创建 Navbar 的位置

Nav.js：

import React from 'react';
import { Navbar, NavItem, MenuItem, NavDropdown } from 'react-bootstrap';

export default class Nav extends React.Component {

constructor() {
    super();
    this.state = {};
}

render() {
    const navbarInstance = (
            <Navbar inverse defaultExpanded={true}>
                <Navbar.Header>
                    <Navbar.Brand>
                        <a href="#">Songshare</a>
                    </Navbar.Brand>
                    <Navbar.Toggle />
                </Navbar.Header>
                <Navbar.Collapse>
                    <Nav>
                        <NavItem eventKey={1} href="#">Link</NavItem>
                        <NavItem eventKey={2} href="#">Link</NavItem>
                        <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
                            <MenuItem eventKey={3.1}>Action</MenuItem>
                            <MenuItem eventKey={3.2}>Another action</MenuItem>
                            <MenuItem eventKey={3.3}>Something else here</MenuItem>
                            <MenuItem divider />
                            <MenuItem eventKey={3.3}>Separated link</MenuItem>
                        </NavDropdown>
                    </Nav>
                    <Nav pullRight>
                        <NavItem eventKey={1} href="#">Link Right</NavItem>
                        <NavItem eventKey={2} href="#">Link Right</NavItem>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
     );

     return (
        <div>
            {navbarInstance};
        </div>
     );
   }
 }

然后我像这样在MainLayout.js 中导入该类；

import React from "react";

import Nav from "./layout/Nav";

export default class MainLayout extends React.Component {
render() {
    return (
        <div>
            <Nav />
        </div>
    );
  }
}

最后我在我的app.js 中导入MainLayout.js

import React from "react";
import ReactDOM from "react-dom";

import MainLayout from "./pages/components/MainLayout";


const app = document.getElementById('app');

ReactDOM.render(<MainLayout />, app);

由于我看到错误说明了checkPropTypes()，因此我尝试将此行添加到末尾，但仍然遇到相同的错误。我从here得到这个想法

Nav.propTypes = { defaultExpanded: React.PropTypes.bool };

【问题讨论】：

您的组件被调用.. Nav extends React.Component 但您在该组件的渲染方法中使用了<Nav>。你期待会发生什么？
@azium 解决了问题。

标签： javascript jquery reactjs ecmascript-6 react-bootstrap

【解决方案1】：

这里的问题是我的组件被称为Nav。后来我有一个元素<Nav>，这会导致 React 中的混乱。我也忘了像这样在顶部导入<Nav>元素；import {Nav} from 'react-bootstrap'。

【讨论】：