제가 본 스타 워즈 영화 목록을 만들려고합니다. 클릭 한 내용을 확인 및 선택 취소하고 localStorage에 저장하는 기능을 갖고 싶습니다. 어떤 이유로 한 번에 두 개 이상의 영화를 교차하는 경우 페이지를 새로 고친 후 마지막으로 교차 한 영화 만 교차 된 상태로 유지되는 경우가 있습니다. 내 콘솔로 디버깅을 시도했는데 내 상태에 결함이 있음을 알 수 있습니다. 때로는 두 개 이상의 요소를 클릭 한 후 일부 요소가 true로 바뀌지 않고 false로 유지됩니다.
이것은 내 코드입니다.
import React from 'react';
export default class Movie extends React.Component{
constructor(props){
super()
this.state = (localStorage.appState) ? JSON.parse(localStorage.appState)
: { 0: false, 1: false, 2: false, 3: false, 4: false, 5: false};
}
clickedTitle = (event) => {
if (event.target.tagName === "SPAN") {
this.setState({
[event.target.id]: !this.state[event.target.id]
}, () => {
localStorage.setItem('appState',JSON.stringify(this.state))
});
// localStorage.clear()
}
}
render(){
return(
<div className="sw_title" onClick={this.clickedTitle}>
<span id={this.props.index} className={`${this.state[this.props.index] ? "clicked" : "not-clicked"}`}> {this.props.title} </span>
</div>
);
}
}
소중한 시간 내 주셔서 미리 감사드립니다! 4 월
내가 말할 수있는 한 각 단일 영화 요소에서이 작업을 수행하고 있습니다. 동일한 localStorage 항목을 단일 영화의 새로운 값으로 설정할 때마다 (주어진 Movie 구성 요소에 대한 상태는 하나의 인스턴스에 대한 값만 보유합니다). MovieS에서와 같이 Movie 컴포넌트 외부에서 상태 관리를 유지하고 Movie에서 프레젠테이션 작업 만 수행하는 것이 더 나은 방법입니다.
import React from 'react';
export default class MovieS extends React.Component{
constructor(props){
super(props)
this.state = (localStorage.appState) ? JSON.parse(localStorage.appState)
: { 0: false, 1: false, 2: false, 3: false, 4: false, 5: false};
}
clickedTitle = (event) => {
if (event.target.tagName === "SPAN") {
this.setState({
[event.target.id]: !this.state[event.target.id]}, () => {localStorage.setItem('appState', JSON.stringify(this.state))
});
// localStorage.clear()
}
}
render(){
this.props.movies.map( (movie) => (
<Movie
click={clickedTitle}
className={this.state[movie.id] ? "clicked" : "not-clicked"}
title={movie.title}
/>
))
}
}
function Movie({ click, className, title }) => (
<div className="sw_title" onClick={click}>
<span id={this.props.index} className={}> {} </span>
</div>
)
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다