0

こんにちは、私は同じ問題を抱えていますが、react-router-dom::4.1.1 を使用しています。ルート パスを実行しようとすると、この投稿の最後のセクションに示されているこのエラーが発生します。

router.js

import React, { PureComponent } from 'react';
import {
    BrowserRouter as Router,
    Route,
} from 'react-router-dom';

import Polls from '../containers/pollsContainer';

class AppRouter extends PureComponent {
    render() {
        return (
            <Router >
                <Route path="/" component={Polls} />
            </Router>
        );
    }
}

export default AppRouter;

pollsContainer.js

// Simple example of a React "smart" component
import React, { Component } from 'react';
import { connect } from 'react-redux';

import Polls from '../containers/pollsContainer';
import { getPolls } from '../actions';

// Which part of the Redux global state does our component want to receive as props?
const mapStateToProps = (state) => {
    const { polls } = state;
    return { polls };
};

const mapDispatchToProps = { getPolls };

class PollsContainer extends Component {
    componentWillMount() {
        this.props.getPolls();
        console.info('PollsContainer willMount');
    }

    render() {
        const { polls } = this.props;
        return <Polls polls={polls} />;
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(PollsContainer);

SeamosApp.jsx

import React from 'react';
import { Provider } from 'react-redux';

import AppRouter from './router';
import configureStore from '../store';


// See documentation for https://github.com/reactjs/react-redux.
// This is how you get props from the Rails view into the redux store.
// This code here binds your smart component to the redux store.
// railsContext provides contextual information especially useful for server rendering, such as
// knowing the locale. See the React on Rails documentation for more info on the railsContext
const SeamosApp = (props) => (
  <Provider store={configureStore(props)}>
    <AppRouter />
  </Provider>
);

export default SeamosApp;

私が得るブラウザエラーは次のものです:

Uncaught RangeError: ReactOnRails encountered an error while rendering component: SeamosApp.
Original message: Maximum call stack size exceeded
    at getDependsOnOwnProps (eval at <anonymous> (webpack-bundle.self-51c4cc2….js?body=1:1872), <anonymous>:26:30)
    at Function.detectFactoryAndVerify (eval at <anonymous> (webpack-bundle.self-51c4cc2….js?body=1:1872), <anonymous>:55:33)
    at mapToPropsProxy (eval at <anonymous> (webpack-bundle.self-51c4cc2….js?body=1:1872), <anonymous>:47:46)
    at handleFirstCall (eval at <anonymous> (webpack-bundle.self-51c4cc2….js?body=1:4368), <anonymous>:30:18)
    at pureFinalPropsSelector (eval at <anonymous> (webpack-bundle.self-51c4cc2….js?body=1:4368), <anonymous>:78:81)
    at Object.runComponentSelector [as run] (eval at <anonymous> (webpack-bundle.self-51c4cc2….js?body=1:1865), <anonymous>:35:25)
    at Connect.initSelector (eval at <anonymous> (webpack-bundle.self-51c4cc2….js?body=1:1865), <anonymous>:187:23)
    at new Connect (eval at <anonymous> (webpack-bundle.self-51c4cc2….js?body=1:1865), <anonymous>:128:15)
    at eval (eval at <anonymous> (webpack-bundle.self-51c4cc2….js?body=1:3885), <anonymous>:295:18)
    at measureLifeCyclePerf (eval at <anonymous> (webpack-bundle.self-51c4cc2….js?body=1:3885), <anonymous>:75:12)
4

1 に答える 1