0

getFilmData - асинхронная функция она возвращает data, которые вставляются в стейт

в стейте есть свойства:

  1. isLoaded (false - data не загрузилось, true - загрузилось)
  2. 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>

1 ответ 1

1

Я бы написал этот компонент примерно так:

import React from "react";

const getFilmData = async (filmId) => {   // simulation of async function
  return await new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() > 0.2) {
        resolve(filmId);
      } else {
        reject();
      }
    }, 1000);
  });
};

class Cinema extends React.Component {
  state = {
    loading: true,
    error: null,
    content: null,
  };

  async getData(id) {
    try {
      const data = await getFilmData(id);
      this.setState({ loading: false, error: null, content: data });
    } catch {
      this.setState({ loading: false, error: true });
    }
  }

  componentDidMount() {
    this.getData(this.props.filmId);
  }

  componentDidUpdate(prevProps) {
    if (this.props.filmId !== prevProps.filmId) {
    this.getData(this.props.filmId);
    }
  }

 render() {
    const { loading, error, content } = this.state;

    if (loading) {
      return <div>Loading...</div>;
    } else if (error) {
      return <div>Error!</div>;
    }

    return <div> {content} </div>;
  }
}

export default Cinema;

1
  • 1
    Спасибо,я немного подправил componentDidUpdate (пропсы у меня одинаковые, а стейт loading изменяется), и всё заработало.
    – Color kat
    23 окт 2020 в 14:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.