=== EDIT===
Sorka, że tak pogmatwanie to napisałem. Problem rozwiązałem przez użycie hooków i funkcji useEffect().
Witam. Tworzę projekt w ramach nauki. Na backendzie mam Django (REST API), na frontendzie React.
Header jest na każdej podstronie i zawiera linki do innych podstron, ale TYLKO to komponentu PostByCategory.
Header.js
import React, { Component } from "react";
import { Link } from "react-router-dom";
// import { mailIcon, telephoneIcon } from "../common/icons";
export class Header extends Component {
render() {
return (
<>
...
<Link to="/posty/dokumenty-szkolne" className="dropdown-item">
DOKUMENTY SZKOLNE
</Link>
<div className="dropdown-divider"></div>
<Link to="/posty/historia" className="dropdown-item">
HISTORIA
</Link>
<div className="dropdown-divider"></div>
<Link to="/posty/patron" className="dropdown-item">
PATRON
</Link>
...
</>
Tu znajduje się komponent Header. App.js
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { HashRouter as Router, Route, Switch } from "react-router-dom";
import { Provider } from "react-redux";
import store from "../store";
import Header from "./layout/Header";
import Footer from "./layout/Footer";
import MainPage from "./main_page/MainPage";
import PostsByCategory from "./posts/PostsByCategory";
import PostBySlug from "./posts/PostBySlug";
import "react-calendar/dist/Calendar.css";
export class App extends Component {
render() {
return (
<Provider store={store}>
<Router>
<>
<Header />
<Switch>
<Route exact path="/" component={MainPage} />
<Route
exact
path="/posty/:category_slug"
component={PostsByCategory}
/>
<Route
exact
path="/posty/:category_slug/:post_slug"
component={PostBySlug}
/>
</Switch>
<Footer />
</>
</Router>
</Provider>
);
}
}
export default App;
ReactDOM.render(<App />, document.querySelector("#app"));
Przechodząc np. ze strony głównej (komponent MainPage) z jakiegoś linku z Headera do komponentu PostsByCategory wszystko jest ok. Ale gdy już jestem na tej podstronie i chcę przejść na inną podstronę (ale ciągle tego samego komponentu) zmienia się tylko URL, a widok pozostaje bez zmian.
Doszedłem do wniosku, że powodem jest używanie tylko metody componentDidMount() w komponencie PostsByCategory:
import React, { Component } from "react";
import { connect, setState } from "react-redux";
import { getPostsByCategory } from "../../actions/posts_by_category";
import { Link } from "react-router-dom";
import renderHTML from "react-render-html";
import Calendar from "react-calendar";
export class PostsByCategory extends Component {
componentDidMount() {
const {
match: { params },
} = this.props;
this.props.getPostsByCategory(params.category_slug);
}
state = {
date: new Date(),
};
onChange = (date) => this.setState({ date });
render() {
if (this.props.posts.length > 0) {
document.title = this.props.posts[0].category_name + " - CKZiU";
return (
<div className="container mt-5">
<div className="row">
<div className="col-lg-8">
<h1 className="mb-5">
Kategoria: {this.props.posts[0].category_name}
</h1>
{this.props.posts.map((post) => (
<div key={post.id} className="border-bottom mb-5">
<h2>{post.title}</h2>
<span className="text-muted">
📅 {post.created_date} {"\u00A0"} 🙍♂️ {post.owner_fullname}
</span>
<div style={{ textAlign: "justify" }} className="mt-4">
{renderHTML(post.markdown_content)}
</div>
<Link
className="btn btn-primary mb-3"
to={
this.props.match.params.category_slug +
"/" +
post.slug +
"/"
}
>
CZYTAJ WIĘCEJ...
</Link>
</div>
))}
</div>
<div className="col-lg-4 d-flex justify-content-center">
<div>
<Calendar onChange={this.onChange} value={this.state.date} />
</div>
</div>
</div>
</div>
);
} else {
return (
<div className="container mt-5">
<h1 style={{ textAlign: "center" }} className="mt-5">
Ups...
<br />
<span style={{ textAlign: "center", fontSize: "20px" }}>
Ta kategoria jest pusta.
</span>
</h1>
</div>
);
}
}
}
const mapStateToProps = (state) => {
return { posts: state.posts.posts };
};
export default connect(mapStateToProps, { getPostsByCategory })(
PostsByCategory
);
Próbowałem używać metod componentWitllUpdate(), componentDidUpdate(), componentWillRecieveProps(), shouldComponentUpdate() i w nich faktycznie było widoczne, że akcja zachodzi, lecz tam próbując pobrać dane, w konsoli widoczne było, aplikacja wpada w nieskończoną pętlę. Proszę o pomoc i z góry dzięki za wszelkie odpowiedzi.