0

私は1つのコンポーネントを持っています:

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;

この2番目のものは、別のコンポーネントをラップする単なるコンポーネントであることに注意してください....

次のエラーが表示され続けます。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;

それはうまく動作します。唯一の違いは、インデックス ルートが "Body" の最初のものは、機能的な App コンポーネントをラップする単なる機能的なコンポーネントであることです。最大呼び出しスタック サイズ エラーが発生するのはなぜですか?

4

2 に答える 2

0

私は実際に何が起こっているのかを理解しました.... どうやら、私のapp.jsファイルはApp/index.js. 名前を に変更してからApp/app.jsインポートしたところ、完全に機能しました。理由はわかりませんが、それが問題であり、ファイルの名前をapp.jsfromに変更するとApp/index.js、stackoverflow エラーが防止されました。そこで何が起こったのかさえわかりません..

于 2016-08-13T20:32:03.783 に答える