• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 React 게시판 상품 개수 1 에서 0으로, 장바구니 삭제 관련 질문

상품 개수 1 에서 0으로, 장바구니 삭제 관련 질문

  • 이 주제에는 6개 답변, 2명 참여가 있으며 김지우3 년 전에 전에 마지막으로 업데이트했습니다.
7 글 보임 - 1 에서 7 까지 (총 7 중에서)
  • 글쓴이
  • #40585

    김지우
    참가자
    리덕스 강의 부분이 업데이트 되었다기에 돌아와 복습해보니 바뀐부분이 꽤 많아 놀랐습니다ㅎㅎ;
    저번에 만들었던 앱을 새로 만들며 익히고 있는도중에 장바구니 삭제 부분에서 막혀버렸습니다.
    
    
    
    
    상품 개수 1에서 -1 버튼을 누르면
     TypeError: undefined is not an object (evaluating 'a.name')
    라는 에러와 함께 빈 화면이 떠버리네요
    장바구니 추가, + 와 - 버튼 잘 동작하다가 1에서 - 버튼을 누르면 delete 함수를 사용해서 
    상품 이름(a.name) 등 데이터를 지워서 그런지 에러와 함께 빈 화면이 떠버립니다
    
    (Cart.js) 부분입니다 
    
    <tbody>
     {
     state.cart.map((a,i)=>
    <tr key={i}>
     <td>{}</td>
     <td>{ a.name }</td>
     <td>{ a.quan }</td>
     <td><button className="buttonOrange" role="button" onClick={
     ()=>{dispatch(addCount(state.cart[i].id))}}>
     +1</button>
     <button className="buttonGreen" role="button" onClick={
     ()=>{dispatch(subCount(state.cart[i].id))}}>
     -1</button>
     </td>
     </tr>
     )
    }
     </tbody>
    
    아래는 store.js 파일 입니다. 
    delete()를 사용하는 방법이 틀린것 같기도 합니다
    어떻게 해야 상품 숫자가 1에서 0으로 바뀔때 장바구니에서 삭제할 수 있을까요?
    
    
    import { configureStore, createSlice } from '@reduxjs/toolkit'
    
    let cart = createSlice({
    name : 'cart',
    initialState : [],
    reducers : {
    addItem(state, action) {
    let found = state.findIndex((a)=>{return a.id === action.payload})
    if (found >= 0){
     state[found].quan++;
     } else {
     state.push(action.payload);
     }
     },
    addCount (state, action) {
    let found = state.findIndex((a)=>{return a.id === action.payload})
     state[found].quan++;
     },
    subCount(state, action) {
    let found = state.findIndex((a)=>{return a.id === action.payload})
    if (state[found].quan > 1) {
     state[found].quan--;
     } else if (state[found].quan <= 1) {
    delete(state[found]);
     }
     
     }
     }
    })
    export let {addItem, addCount, subCount} = cart.actions
    export default configureStore({
    reducer: {
    cart : cart.reducer
     }
    })
     
    #40619

    codingapple
    키 마스터
    state.cart가 비어있으면 map 반복문돌리지말라고 if문같은거 씁시다
    #40640

    김지우
    참가자
    삼항연산자로 이렇게 시도했는데 똑같은 오류가 나옵니다
    그냥 {null} 을 <tbody> 안에 넣으면 빈 장바구니 화면이 잘 뜨는데 무엇이 문제일까요ㅠㅠ
    
    <tbody>
     { state.cart ? state.cart.map((a,i)=>
    <tr key={i}>
     <td>{}</td> // 여긴 이미지 태그인데 여기 올리니 빈 칸으로 뜨네요;
     <td>{ a.name }</td>
     <td>{ a.quan }</td>
     <td><button className="buttonOrange" role="button" onClick={
     ()=>{dispatch(addCount(state.cart[i].id))}}>
     +1</button>
     <button className="buttonGreen" role="button" onClick={
     ()=>{dispatch(subCount(state.cart[i].id))}}>
     -1</button>
     </td>
     </tr>
     ) : null
    }
     </tbody>
    #40669

    codingapple
    키 마스터
    빈 array 체크가 잘못된듯요 [] 이렇게만 있어도 true랑 비슷하게 동작할걸요
    #40723

    김지우
    참가자
    delete() 는 undefined 를 뱉길래 아래와 같이 바꿔봤습니다
    
    { state.cart === undefined ? null : state.cart.map((a,i)=>
    <tr key={i}>
     <td>{}</td>
     <td>{ a.name }</td>
     <td>{ a.quan }</td>
     <td><button className="buttonOrange" role="button" onClick={
     ()=>{dispatch(addCount(a.id))}}>
     +1</button>
     <button className="buttonGreen" role="button" onClick={
     ()=>{dispatch(subCount(a.id))}}>
     -1</button>
     </td>
     </tr>
     ) 
    }
    
    혹은 undefined 자리에 빈 어레이를 넣어봐도 빈 화면과 함께 같은 에러가 뜹니다
    
    그래서 delete(state[found]) 사용 대신에 state[found] = {} 를 쓰고 
    state.cart === {} ? null : state.cart.map((a,i)=> 여기도 이렇게 고쳐보고나서 개수를 0으로 만들어 보니
    아래처럼 사진이 남아있습니다 제가 삼항조건연산자를 잘못사용해서 map 반복문이 그대로 돌아가고 있는 것일까요?
    
    
    
    
    #40749

    codingapple
    키 마스터
    state.cart[0] === undefined 합시다
    #40753

    김지우
    참가자
    아아 0번째가 undefined 가 된다는생각을 왜 못했을까요..ㅠㅠ
    정말 깔끔하게 해결되었습니다! 감사합니다!
7 글 보임 - 1 에서 7 까지 (총 7 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관, 개인정보처리방침
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠