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 that you have read and understand our privacy policy and code of conduct.

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