Question

我有一个组件：

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;

我还有一个：

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

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

注意第二个只是一个包装另一个组件的组件....

我继续使用RangeError: Maximum call stack size exceeded

收到以下错误

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

但是，如果我将其更改为：

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

它运作得很好。请注意，唯一的区别是第一个，索引路由为＆＃34; Body＆＃34;，只是一个包装功能App组件的功能组件。为什么会导致最大调用堆栈大小错误？

Answer 1

我实际上已经知道发生了什么......显然，我的app.js文件是在App/index.js下命名的。我将其重命名为App/app.js，然后将其导入并完美运行。我不明白为什么，但这就是问题，我的文件从app.js重命名为App/index.js，阻止了stackoverflow错误。我甚至不确定那里到底发生了什么......

React.js在另一个无状态组件中嵌套无状态功能组件<app>会导致：RangeError：超出最大调用堆栈大小

1 个答案: