Question

我是react.js的初学者。

我收到了这个错误：

Maximum call stack size exceeded

浏览器Chrome控制台中的完整错误输出：

Uncaught RangeError: Maximum call stack size exceeded
at warning (bundle.js:1977)
at callHook (bundle.js:11215)
at emitEvent (bundle.js:11225)
at Object.onBeforeMountComponent (bundle.js:11502)
at Object.mountComponent (bundle.js:13853)
at ReactCompositeComponentWrapper.performInitialMount (bundle.js:7622)
at ReactCompositeComponentWrapper.mountComponent (bundle.js:7509)
at Object.mountComponent (bundle.js:13856)
at ReactCompositeComponentWrapper.performInitialMount (bundle.js:7622)
at ReactCompositeComponentWrapper.mountComponent (bundle.js:7509)

我的代码：

var React=require('react');
var ReactDOM=require('react-dom');

class App extends React.Component{
    render(){
        return(
            <div>
                < Header />,
                < Main />,
                < Footer />
            </div>
        );
    }
}

class Header extends React.Component{
    render(){
        return(
            <Header>
                <nav>
                    <h1>Header</h1>
                </nav>
            </Header>
        );
    }
}

class Main extends React.Component{
    render(){
        return(
            <div>
                <p> text 1</p>
            </div>
        );
    }
}

class Footer extends React.Component{
    render(){
        return(
            <h2>Footer</h2>
        );
    }
}

ReactDOM.render(<App/> ,  document.getElementById('app'));

Answer 1

这是因为你在标题组件中有<Header>标签，因此导致无限循环我想..删除这个..你在App组件中调用标题，再次标记哪个ID调用标题组件等。你应该像这样渲染

class Header extends React.Component{
render(){
    return(
            <nav>
                <h1>Header</h1>
            </nav>
    );
}
}

Answer 2

您通过在Header中呈现Header来进行递归调用。

将您的代码更改为使用header作为真正的html标记：

class Header extends React.Component{
    render(){
        return(
            <header>
                <nav>
                    <h1>Header</h1>
                </nav>
            </header>
        );
    }
}

Answer 3

改变这一点，

class Header extends React.Component{
    render(){
        return(
            <Header>
                <nav>
                    <h1>Header</h1>
                </nav>
            </Header>
        );
    } 
}

要

class Header extends React.Component{
    render(){
        return(
            <div>
                <nav>
                    <h1>Header</h1>
                </nav>
        </div>
        );
    }
}

超出最大调用堆栈大小 - reactjs

3 个答案: