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

[김지우]

리덕스 강의 부분이 업데이트 되었다기에 돌아와 복습해보니 바뀐부분이 꽤 많아 놀랐습니다ㅎㅎ;
저번에 만들었던 앱을 새로 만들며 익히고 있는도중에 장바구니 삭제 부분에서 막혀버렸습니다.




상품 개수 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
 }
})

[codingapple]

state.cart가 비어있으면 map 반복문돌리지말라고 if문같은거 씁시다

[김지우]

삼항연산자로 이렇게 시도했는데 똑같은 오류가 나옵니다
그냥 {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>

[codingapple]

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

[김지우]

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 반복문이 그대로 돌아가고 있는 것일까요?

[codingapple]

state.cart[0] === undefined 합시다

[김지우]

아아 0번째가 undefined 가 된다는생각을 왜 못했을까요..ㅠㅠ
정말 깔끔하게 해결되었습니다! 감사합니다!

[글쓴이]

글