gpt4 book ai didi

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

转载 作者:数据小太阳 更新时间:2023-10-29 04:48:52 29 4
gpt4 key购买 nike

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

我有组件 MovieRow,它在 Popular、Favorite 和 Search 组件中调用。目标是组件 MovieRow 在此 View 中调用时保留其状态(Popular ...)

例如,如果我有 2 部电影,我检查了其中一部电影以添加到收藏夹,这部电影应该保持状态。现在,如果我在单击并更改全局 View 时将电影添加到收藏夹列表,组件 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

电影行.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}

最佳答案

我修改了您的原始代码,以提供一个示例,说明如何在遍历路线时在您的 Popular 组件中保留状态。

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

CodeSandbox link

enter image description here

关于javascript - 如何保留添加到收藏夹列表的组件的状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51322318/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com