Почему я получаю сообщение об ошибке «Uncaught DOMException: не удалось выполнить pushState» в «History» при попытке передать функцию в Link? - PullRequest
0 голосов
/ 29 сентября 2019

Я хочу передать функцию, которая отвечает за обновление состояния App.js, моему компоненту Header, который затем передает его через Links, который направляет к основным компонентам страницы (один из * 1004). *, Resume или Other).


Полная ошибка:

Uncaught DOMException: Failed to execute 'pushState' on 'History' : newPage => {
      this.setState({
        currentPage: newPage
      });
    } could not be cloned.

/*Followed by a long stack trace...*/


App.js

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            currentPage: "home"
        };
    }

    updateCurrentPage = (newPage) => {
        this.setState({currentPage: newPage});
    };

    getCurrentPage = () => {
       return this.state.currentPage;
    };

    render() {
        return (
            <Router>
                <div className="main-container d-flex w-100 h-100 p-3 mx-auto flex-column">
                    <Header
                        updateCurrentPage={this.updateCurrentPage}
                        getCurrentPage={this.getCurrentPage}
                    />
                    <Route exact path='/'
                           component={Home}
                    />
                    <Route exact path='/resume'
                           component={Resume}
                    />
                    <Route exact path='/other'
                           component={Other}
                    />
                </div>
            </Router>
        );
    }
}


Header.js

class Header extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            currentPage: "home",
            dynamicCSS: {
                generalCSS: "header-links mx-3 px-1 ",
                home: "h1",
                resume: "h2",
                other: "h2"
            }
        };
    }

    updateLinkStyle = () => {
        const {dynamicCSS} = this.state;
        let headerCurrentPage = this.state.currentPage;
        let appCurrentPage = this.props.getCurrentPage();
        this.setState({
            currentPage: appCurrentPage,
            [dynamicCSS[appCurrentPage]]: "h1",
            [dynamicCSS[headerCurrentPage]]: "h2"
        });
    };

    render() {
        const {dynamicCSS} = this.state;
        const {generalCSS} = dynamicCSS;
        let homeCSS = dynamicCSS.home,
            resumeCSS = dynamicCSS.resume,
            otherCSS = dynamicCSS.other;

        return (
            <header className="p-4">
                <div className="header mb-5 mt-2">
                    <h1 className="">
                        <Link to={{
                            pathname: "/",
                            state: {updateCurrentPage: this.props.updateCurrentPage}
                        }}
                              className={generalCSS + homeCSS}
                              onClick={this.updateLinkStyle}
                        >Home
                        </Link>
                        <Link to={{
                            pathname: "/resume",
                            state: {updateCurrentPage: this.props.updateCurrentPage}
                        }}
                              className={generalCSS + resumeCSS}
                              onClick={this.updateLinkStyle}
                        >Resume
                        </Link>
                        <Link to={{
                            pathname: "/other",
                            state: {updateCurrentPage: this.props.updateCurrentPage}
                        }}
                              className={generalCSS + otherCSS}
                              onClick={this.updateLinkStyle}
                        >Other
                        </Link>
                    </h1>
                </div>
            </header>
        );
    }
}


Home.js

class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {};
    }

    componentDidMount() {
        // Stuff here
    }

    render() {
        return (
            <h1>
                This is where the <b>home</b> content will go!
            </h1>
        );
    }
}

Понятия не имею, почему я получаю эту ошибку. Если я заменю <Link to={... state:{updateCurrentPage: true}}.../>, я вижу, что updateCurrentPage - это true.


В соответствии с this Я должен быть в состоянии передать функцию без проблем, но без такой удачи. (

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...