Как перерендерить компонент?

Question

[stepan132]

Здравствуйте. Сразу извиняюсь за возможную глупость вопроса, я просто новичок в react. Решил создать сайт по типу imdb. Вот компонент, который рендерит конкретный фильм:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import styled from 'styled-components';

import Preloader from '../components/Preloader/Preloader';

let FilmCardWrapper = styled.div`
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 70px;
`
let FilmCardInfo = styled.div`
    width: 50%;
`
let FilmTitle = styled.h1`
    border-bottom: 2px solid #eee;
`
let FilmOverview = styled.p`
    border-bottom: 2px solid #eee;
    padding-bottom: 20px;
`
let GoBackBtn = styled.button`
    display: block;
    width: 200px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 40px;
    margin-top: 5px;
    border-radius: 4px;
    border: 3px solid #eee;
    background: none;
    cursor: pointer;
`
let SimilarFilmsWrapper = styled.div`
    
`
let SimilarFilmCard = styled.div`
    position: relative;
    width: 150px;
    height: 200px;
`
let SimilarFilmCardImg = styled.img`
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
`
let SimilarFilmCardInfo = styled.div`
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
`

class FilmPage extends Component {
    state = {
        isLoading: true
    }

    componentDidMount() {
        this.setCurrentFilm(this.props.filmId);                              <-- это место вызова функции загрузки данных
    }

    setCurrentFilm = async (id) => {
        this.setState({isLoading: true});
        let { service, setCurrentFilm } = this.props;
        let filmData = await service.getFilm(id);
        let similarFilms = await service.getSimilarFilms(id);
        setCurrentFilm({
            film: filmData,
            similar: similarFilms
        });
        this.setState({isLoading: false});
    }

    render() {
        let { film, similarFilms } = this.props.currentFilm;
        return (
            <>
                {this.state.isLoading ?
                    <Preloader /> :
                    <div>
                        <FilmCardWrapper>
                            <img src={`https://image.tmdb.org/t/p/w500${film.poster_path}`} alt="film"/>
                            <FilmCardInfo>
                                <FilmTitle>{film.title}</FilmTitle>
                                <h2>{film.tagline}</h2>
                                <FilmOverview>{film.overview}</FilmOverview>
                                <h3>Vote: {film.vote_average}</h3>
                                <h3>Votes count: {film.vote_count}</h3>
                                <h3>Release: {film.release_date}</h3>
                                <h3>Budget: {film.budget}$</h3>
                                <h3>Status: {film.status}</h3>
                            </FilmCardInfo>
                        </FilmCardWrapper>
                        <h2>Similar films</h2>
                        <SimilarFilmsWrapper>
                            {
                                similarFilms.results.map((el) => {
                                    return (
                                        <SimilarFilmCard key={el.id}>
                                            <SimilarFilmCardImg src={`https://image.tmdb.org/t/p/w500${el.poster_path}`} alt="film" />
                                            <SimilarFilmCardInfo>
                                                <h3>{el.title}</h3>
                                                <Link to={`/film/${el.id}`}>View more</Link>
                                            </SimilarFilmCardInfo>
                                        </SimilarFilmCard>
                                    )
                                })
                            }
                        </SimilarFilmsWrapper>
                    </div>
                }
                <GoBackBtn onClick={this.props.history.goBack}>Go back</GoBackBtn>
            </>
        );
    }
}

let mapStateToProps = ({ currentFilm }) => {
    return {
        currentFilm
    }
}
let mapDispatchToProps = (dispatch) => {
    return {
        setCurrentFilm: (film) => dispatch({type: 'SET_CURRENT_FILM', payload: film})
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(FilmPage);

В общем суть проблемы: при обычном переходе на страницу все работает, компонент обновляется, но если нажать на какой-либо фильм из раздела "похожие", то компонент не перерендеривается. Я проверял, id приходит правильный, компонент просто не обновляется. Я предполагаю, что это из-за component did mount, но есть ли ему альтернативы, или прийедется как-то переделывать?

Comments

[stepan132]

P.S. фактически, компонент должен обновляться тогда, когда ему приходит новое id фильма

Answer 1

[Антон Спирин]

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

Comments

[stepan132]

Спасибо!