javascript - 如何为添加到收藏夹列表的组件保留状态

问题描述

我尝试在三个全局视图中保存状态。

我有在、收藏夹和组件MovieRow中调用的组件。目标是组件在此视图中调用时保持其状态（...）PopularSearchMovieRowPopular

例如，如果我有两部电影，我检查了一部电影以添加到收藏夹，这部电影应该保持状态。现在，如果我在单击并更改全局视图时将电影添加到收藏夹列表，组件MovieRow将再次挂载并重置状态。

我尝试了很多不同的方法。将状态一个具有条件渲染的全局变量存储到我的MovieRow和其他的。

编辑：你可以在这里看到完整的代码https://codesandbox.io/s/lpjp0oxmmq

编辑 2：我成功存储了我的状态，但我无法成功正确使用。

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

componentWillMount() {
    const rehydrate = JSON.parse(localStorage.getItem('someSavedState'))
    console.log(" ------------------- will mount ------------------- ")
    console.log(rehydrate)
    console.log(" ------------------- ---- ----- ------------------- ")
    // 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.log(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}

标签： javascriptreactjsreact-routerjsxthemoviedb-api

javascript - 如何为添加到收藏夹列表的组件保留状态

问题描述

解决方案

推荐阅读