Как сохранить состояние для компонента, добавленного в список избранного

Я пытаюсь сохранить состояние в трех глобальных точках зрения.

У меня есть компонент MovieRow, который называется в компонентах Popular, Favorite и Search. Цель состоит в том, чтобы компонент MovieRow сохранял свое состояние при вызове в этих представлениях (Popular ...)

Например, если у меня есть 2 фильма, я проверил один фильм, чтобы добавить его в избранное, этот фильм должен сохранить состояние. Теперь, если я добавляю фильм в список избранных, когда я щелкаю и изменяю глобальное представление, компонент MovieRow снова монтируется и сбрасывает состояние.

Я пробовал много разных способов. Сохраните состояние одной глобальной переменной с условным рендерингом для моего MovieRow и других.

Обновлено: здесь вы можете увидеть полный код https://codesandbox.io/s/lpjp0oxmmq

Изменить 2: я успешно сохраняю свое состояние, но не могу правильно использовать.

componentWillUnmount () {
    let storeState = localStorage.setItem('someSavedState', JSON.stringify(this.state))
    console.info(" ------------------- unmount ------------------- ")
    console.info(JSON.parse(localStorage.getItem('someSavedState')))
    console.info(" ------------------- ------- ------------------- ")
}

componentWillMount() {
    const rehydrate = JSON.parse(localStorage.getItem('someSavedState'))
    console.info(" ------------------- will mount ------------------- ")
    console.info(rehydrate)
    console.info(" ------------------- ---- ----- ------------------- ")
    // this.setState({isFaved: rehydrate})
}

Ты хоть представляешь, кто мне поможет?

Мы видим, как государство теряется на этой картинке. Цвет кнопки, зависящей от состояния, был сброшен.

Просмотр популярных с первым фильмом, добавленным в избранное

просмотреть избранное с любимым фильмом

MoviesRow.js:

import React from 'react'
import '../css/MovieRow.css';
import { APIKEY, baseURL } from '../../App'
import { filter } from '../../View/Popular'

var myFavoriteMovies = []

function IsFav(props) {
    return (
        <div movieId = {props.movie.id} className = "MovieRow">
        <div>
        <img alt = "poster" src = {props.posterSrc} />
        </div>
        <div>
        <h3>{props.movie.title}</h3>
        <p>{props.movie.overview}</p>
        <input type = "button" value = "View"/>

        <button onClick = {props.onClick}  className = " heart">
        </button>

        </div>
        </div>
        );
}

function IsNotFav(props) {
    return (
        <div movieId = {props.movie.id} className = "MovieRow">
        <div>
        <img alt = "poster" src = {props.posterSrc} />
        </div>
        <div>
        <h3>{props.movie.title}</h3>
        <p>{props.movie.overview}</p>
        <input type = "button" value = "View"/>

        <button onClick = {props.onClick} className = "toggled heart">
        </button>

        </div>
        </div>

        );
}

class MovieRow extends React.Component {
    constructor(props) {
        super(props)
        this.addFavorite = this.addFavorite.bind(this)
        this.deleteFavorite = this.deleteFavorite.bind(this)
        this.state = {
            isFaved: false,
        }
    }

    viewMovie() {
        const url = "https://www.themoviedb.org/movie/" + this.props.movie.id
        window.location.href = url
        console.info(this.props.movie.id)
    }

    addFavorite() {
        this.setState({isFaved: true})
        const favMovie = "".concat(baseURL, 'movie/', this.props.movie.id ,'?api_key=', APIKEY) 
        myFavoriteMovies.push(favMovie)
    }

    deleteFavorite() {
        this.setState({isFaved: false})
    }

    render() {
        const isFaved = this.state.isFaved;
        let movie;

        if (isFaved) {
            movie = <IsNotFav  movie = {this.props.movie} posterSrc = {this.props.posterSrc} onClick = {this.deleteFavorite}/>
        } else {
            movie = <IsFav movie = {this.props.movie} posterSrc = {this.props.posterSrc} onClick = {this.addFavorite}/>
        }

        return movie
    }
}
export { MovieRow as default, myFavoriteMovies}