ReactJSで「再帰が多すぎる」エラーを修正するにはどうすればよいですか？

Question

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ファイルを一緒にビルドした結果です。

私はこの問題は、どこかにあるため、無限ループの発生していると思いますが、私はいずれかを使用していないので、私はこの問題は、私がNavbar

Nav.jsを作成するところである私の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にインポートします。私はエラーがcheckPropTypes()について何かを言っているのを見ているので

import React from "react"; 

import Nav from "./layout/Nav"; 

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

は最後に、私はその後、私のapp.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); 

でMainLayout.jsをインポートし、私は最後に次の行を追加し、私はまだ同じエラーを取得しています試してみました。私はここでの問題は、私のコンポーネントがNavと呼ばれているということであったhere

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

Answer 1

からそのアイデアを得ました。その後、私はReactの混乱の原因となる要素<Nav>を持っています。私はまた、<Nav>要素をこのように一番上にインポートするのを忘れていました。 import {Nav} from 'react-bootstrap'。