React.js Verschachtelung stateless Funktionskomponente <App /> in anderen zustandslose Komponente ergibt: Auslöser Range: maximale Anrufstapelgröße überschritten

Question

Ich habe eine Komponente:

import React from 'react'; 

import Footer from '../Footer'; 
import AddTodo from '../../containers/AddTodo'; 
import VisibleTodoList from '../../containers/VisibilityTodoList'; 

const App =() => (
    <div> 
    <AddTodo /> 
    <VisibleTodoList /> 
    <Footer /> 
    </div> 
); 

export default App; 

und ich habe ein anderes:

import React from 'react'; 
import App from './../../App/'; 
// import Footer from '../../Footer'; 

const Body =() => (
    <div> 
    <App /> 
    </div> 
); 
export default Body; 

Beachten Sie, dass diese zweite Komponente nur eine Komponente ist, die eine andere Komponente umschließt.

Ich bekomme weiterhin den folgenden Fehler mit, RangeError: Maximum call stack size exceeded

const routes = (
    <Route path="/" component={TopNavBar}> 
    <IndexRoute component={Body} /> 
    </Route> 
); 
export default routes; 

Allerdings, wenn ich es ändern, statt:

const routes = (
     <Route path="/" component={TopNavBar}> 
     <IndexRoute component={App} /> 
     </Route> 
    ); 
    export default routes; 

Es funktioniert gut. Beachten Sie, der einzige Unterschied besteht darin, dass der erste mit der Indexroute als "Body" nur eine funktionale Komponente ist, die die funktionale App-Komponente umschließt. Warum verursacht dies einen maximalen Fehler beim Aufruf des Stacks?

Answer 1

Ich habe einen Code basierend auf Ihren Codes geschrieben, aber konnte Ihren Fehler nicht replizieren, alles funktioniert gut. Ich habe auch versucht, mit Komponenten in separaten Dateien, aber immer noch alles funktioniert gut. Ich denke, etwas fehlt in Frage. Wenn Sie möchten, kann ich diese 7 Dateien mit Ihnen teilen, so dass Sie versuchen und vergleichen können.

import React, {PropTypes} from 'react'; 
import {Route, Router, browserHistory, IndexRoute} from 'react-router'; 


const TopNavBar = () => (
    <div> 
    "TopNavBar" 
    </div> 
); 
const Footer = () => (
    <div> 
    "Footer" 
    </div> 
); 

const AddTodo = () => (
    <div> 
    "AddTodo" 
    </div> 
); 

const VisibleTodoList = () => (
    <div> 
    "VisibleTodoList" 
    </div> 
); 

const App =() => (
    <div> 
    <AddTodo /> 
    <VisibleTodoList /> 
    <Footer /> 
    </div> 
); 

const Body =() => (
    <div> 
    <App /> 
    </div> 
); 
export default Body; 


export default class Q2 extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    return (<Router history={browserHistory}> 
     <Route path="/" component={TopNavBar}> 
     <IndexRoute component={Body} /> 
     </Route> 
    </Router>); 
    } 
} 

Q2.propTypes = { 
}; 

Answer 2

Ich dachte eigentlich, was da los war .... Anscheinend meine app.js Datei unter App/index.js benannt wurde. Ich habe es in App/app.js umbenannt und dann importiert und es hat perfekt funktioniert. Ich habe keine Ahnung warum, aber das war das Problem und das Umbenennen meiner Datei zu app.js von App/index.js verhinderte den Stackoverflow-Fehler. Ich bin mir nicht einmal sicher, was wirklich dort passiert ist.