-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
favorite list에서 삭제
21.01.14 00:59 작성 조회수 153
0
안녕하세요 선생님!
제가 선생님이 하신 Axios.post 이런 부분을 전부 다 redux로 하도록 바꾸었는데 그 중에서 favorite page에서 삭제 버튼을 눌렀을 때만 onClick 이벤트로 삭제가 되어야하는데 favorite page에 접속하면 잠깐동안 항목에 리스트가 보였다가 다 자동으로 삭제가 되는 문제가 있어서 질문드려요!
콘솔로 찍어보니까 데이터는 전달되었는데 제가 버튼을 누르지않았는데도 onClickFavorite 이라고 제가 정의한 함수가 실행되고 있더라구요. 혹시 어디가 틀렸는지 가르쳐주실 수 있으실까요??
import React, { useEffect, useState } from 'react'
import './favorite.css';
import { useDispatch } from 'react-redux';
import { getFavorite, removeFavorite } from '../../../_actions/user_action';
import { Popover } from 'antd';
import { IMAGE_BASE_URL } from '../../../Config';
function FavoritePage() {
const dispatch = useDispatch();
const [Favorites, setFavorites] = useState([])
useEffect(() => {
console.log('useeffect')
dispatchFavoriteMovies()
}, [])
const dispatchFavoriteMovies = () => {
dispatch(getFavorite({userFrom: localStorage.getItem('userId')}))
.then(response => {
if(response.payload.success){
console.log('dispatchfavoritemoviesresponse.payload',response.payload)
setFavorites(response.payload.favorites)
}else{
alert('영화 정보를 가져오는데 실패')
}
})
}
const onClickDelete = (movieId, userFrom) => {
const variables = {
movieId,
userFrom
}
dispatch(removeFavorite(variables))
.then(response => {
if(response.payload.success){
dispatchFavoriteMovies()
console.log('onclickdeleteresponse.payload',response.payload)
}else{
alert('좋아요 취소 실패')
}
})
}
const renderCards = Favorites.map((favorite, index) => {
const content = (
<div>
{favorite.moviePost ?
<img src={`${IMAGE_BASE_URL}w500${favorite.moviePost}`} /> : "no image"
}
</div>
)
return <tr key={index}>
<Popover content={content} title={`${favorite.movieTitle}`}>
<td>{favorite.movieTitle}</td>
</Popover>
<td>{favorite.movieRunTime} mins</td>
<td><button onClick={onClickDelete(favorite.movieId, favorite.userFrom)}>Remove</button></td>
</tr>
})
return (
<div style={{ width: '85%', margin: '3rem auto' }}>
<h2>Favorite Movies</h2>
<hr />
<table>
<thead>
<tr>
<th>Movie Title</th>
<th>Movie RunTime</th>
<th>Remove from favorites</th>
</tr>
</thead>
<tbody>
{renderCards}
</tbody>
</table>
</div>
)
}
export default FavoritePage
따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
무비앱 시리즈 #12 Favorite list에 추가 삭제 ( 따라하며 배우는 리액트 노드 )
강의실 바로가기
답변을 작성해보세요.
답변 0