Wie behebe ich einen "zu viel Rekursion" Fehler in ReactJS?

Question

Ich versuche eine NavBar für meine Webanwendung zu erstellen. Wenn ich gehe, um index.html zu öffnen, lädt nichts. Wenn ich die Webkonsole in Firefox überprüfe gibt es mir diesen Fehler:

too much recursion wenn ich in es klicke gibt es mir das;

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 

Es gibt mehr Zeilen auf diesen Fehler, aber ich hoffe, dass die ersten paar Zeilen bei der Identifizierung des Problems helfen werden, wenn mehr benötigt werden, lassen Sie es mich wissen. Ich habe es auch auf Chrome versucht und es gibt mir Error: Maximum call stack size exceeded.

Für alle, die sich fragen, was vendor.js und bundle.js sind, sind sie das Ergebnis gulp Erstellen meiner Javascript-Dateien zusammen.

ich glaube, das Problem irgendwo wegen einer Endlosschleife auftritt, aber ich habe verwendet nicht so denke ich, dass das Problem aus meiner Nav.js Datei stammt das ist, wo ich den Navbar

Nav.js erstellen:

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

ich dann diese Klasse importieren in meinem MainLayout.js wie so;

import React from "react"; 

import Nav from "./layout/Nav"; 

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

Schließlich importieren ich MainLayout.js dann in meinem 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); 

Da ich, dass der Fehler sah, sagte etwas über checkPropTypes() ich diese Zeile am Ende versucht, das Hinzufügen und ich bin immer noch die gleichen Fehler. Ich habe diese Idee von here

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

Answer 1

Das Problem hierbei war, dass meine Komponente Nav genannt wird. Später habe ich dann ein Element <Nav>, das die Verwirrung in React verursacht. Ich habe auch vergessen, das <Nav> Element an der Spitze wie folgt zu importieren; import {Nav} from 'react-bootstrap'.