Я хочу передать функцию, которая отвечает за обновление состояния 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 Я должен быть в состоянии передать функцию без проблем, но без такой удачи. (