getFilmData - асинхронная функция она возвращает data, которые вставляются в стейт
в стейте есть свойства:
- isLoaded (false - data не загрузилось, true - загрузилось)
- stage (1 - спрятан компонент с контентом, показан компонент загрузки, 2 - наоборот) через t времени с 1 меняется на 2, чтобы когда данные вставились и только затем основной контент показался (для анимации нужно)
Проблема в том, что data приходит, стейт обновляется (если его вывести в том же месте), НО в render и componentDidMount обновления не видны
import React from "react";
import {
RouteComponentProps
} from "react-router-dom";
import getFilmData from "@modules/getFilmData";
import ErrorPage from "@components/pages/error/error";
import Loading from "@components/pages/loading/Loading";
type RouteParams = {
filmId: string;
};
interface IFilmData {
imdb_id: string | null;
// other propertyes
}
interface IState {
liked: boolean;
isLoaded: boolean;
error: boolean;
stage: number;
stagePage: JSX.Element | null;
}
class Cinema extends React.Component < RouteComponentProps < RouteParams > , IFilmData & IState > {
_isMounted = false;
constructor(props: any) {
super(props);
this.state = {
isLoaded: false,
error: false,
stage: 1,
stagePage: null
}
as IState & IFilmData;
}
componentWillUnmount() {
this._isMounted = false;
}
componentDidMount() {
this._isMounted = true;
let Content = () => {
if (!this.state.isLoaded) return null;
else if (this.state.error) return <ErrorPage / > ;
else {
return (
// ....
<div>{this.state.imdb_id}</div>
// .....other states
);
}
};
this.setState({
stagePage: (
<React.Fragment >
<Loading / >
<Content / >
</React.Fragment>
)
});
// when component mount get data of film
getFilmData < IFilmData > (this.props.match.params.filmId).then(
data => {
if (this._isMounted) this.setState({
imdb_id: data.imdb_id,
isLoaded: true
}, () => {
// !!!!STATE IS UPDATED!!!!!!
console.log(this.state);
});
}
);
// loading
if (!this.state.isLoaded) this.setState({
stage: 1
});
// loaded
if (this.state.isLoaded) {
setTimeout(() => {
// when data is loaded
// wait a while for the data to be inserted
if (this._isMounted) this.setState({
stage: 2
});
}, 1000);
}
// !!!!!!STATE IS NOT UPDATED!!!!!!
console.log('componentDidMoutn',this.state);
}
render() {
let prefix = "hide";
if (this.state.stage == 1) prefix = "loading";
else if (this.state.stage == 2) prefix = "show";
// !!!!!!STATE IS NOT UPDATED!!!!!!
console.log('render', this.state.stage);
return (<div className = {`page ${prefix}` } > {
this.state.stagePage
} < /div>);
}
}
export default Cinema;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>