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

Posted 2023-02-21

【中文标题】如何为添加到收藏夹列表的组件保留状态

【英文标题】：How to preserve state for component added to an favourite list

【发布时间】：2018-12-21 16:03:50

【问题描述】：

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

我有组件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.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)

你知道谁帮助我吗？

我们看到状态在这张图片中迷失了。依赖状态的按钮颜色已重置。

View popular with the first movie added to fav

view favorite with fav movie

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  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  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

【问题讨论】：

您可以尝试在Favorite 中声明myFavoriteMovies 数组并将其作为道具传递给MovieRow。当然，您还需要将toggleFavorite（绑定到Favorite）作为道具传递。通过像这样向上移动状态，您可以保证Favorite 对状态变化敏感并相应地重新渲染。

是的，但是我的所有视图（我有三个全局组件PopularSearchFavorite）所有这些组件都显示带有MovieRow 的电影。我必须在所有全局组件中显示最喜欢的状态。如果我按照您的想法进行操作，我会在 Favorite 全局组件中更新状态，而不是在 Search 或 Popular 或未来组件中的其他状态

【参考方案1】：

我重新编写了您的原始代码，以提供一个示例，说明如何在遍历路由时保留 Popular 组件中的状态。

请参阅下面的链接。编码愉快。

CodeSandbox link

【讨论】：

太好了，谢谢@CesarNapoleonMejiaLeiva。我有一个糟糕的开始。我用你的代码的脑电波重新开始。