如何修复“;太多递归”;ReactJS中的错误
How do I fix a "too much recursion" error in ReactJS?
我正在尝试为我的web应用程序创建一个NavBar。当我打开index.html
时,没有加载任何内容。当我在firefox中检查网络控制台时,它会给我这个错误:
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()
的一些内容,我尝试将这一行添加到末尾,但我仍然收到相同的错误。我从这里得到了这个想法
Nav.propTypes = { defaultExpanded: React.PropTypes.bool };
这里的问题是我的组件名为Nav
。稍后,我有一个元素<Nav>
,它导致React中的混乱。我还忘了像这样导入顶部的<Nav>
元素;CCD_ 16。
相关文章:
- IE9抛出错误的reactJs
- 未捕获的类型错误:无法读取属性'道具'reactJS中未定义的
- 如何修复“;太多递归”;ReactJS中的错误
- Reactjs错误:babel runtime.js:32 Uncaught TypeError:超级表达式必须为nul
- ReactJS - 元素类型无效错误
- ReactJS错误警告
- 呈现函数的ReactJS语法错误
- 捆绑的JS reactjs上需要未定义的错误
- ReactJS:“未捕获的语法错误:意外的令牌<”
- 即使我正在使用未缩小的文件,ReactJS 也出现缩小错误
- ReactJS 开关大小写错误 相邻的 JSX 元素必须包装在封闭标记中
- ReactJS:Dom 渲染顺序错误
- Flask 和 Reactjs 抛出 JSX Transform 错误
- ReactJS 返回解析器错误语法错误:在 AJAX 调用 JAVA servlet 后出现意外的标记 a
- ReactJS 中的语法错误
- 强制 ReactJS 在 propType 验证失败时抛出真正的错误
- ReactJS 在服务器响应加载之前将 props 发送到子级错误
- 未捕获的类型错误:无法读取属性'选中'的未定义-ReactJS
- ReactJS错误:不变量冲突
- ReactJs错误-警告:setState(..):只能更新已挂载或正在挂载的组件