-
안녕하세요 선생님!
cart 페이지 수량증감 기능 관련하여 에러발생 및 의문점이 들어서 질문드립니다.
cart.js페이지의 코드는 간략히 아래와 같습니다 (index.js 페이지에 state를 저장해서 불러오는 방식을 사용했습니다)
const Cart = (props) => {
return (
<div className="cart">
<Table>
<thead>
<tr>
<th>index</th>
<th>상품명</th>
<th>수량</th>
<th>변경</th>
</tr>
</thead>
<tbody>
{
props.cartState.map((a, i) => {
return (
<tr key={i}>
<td> { props.cartState[i].id }</td>
<td> { props.cartState[i].title} </td>
<td> { props.cartState[i].quan } </td>
<td>
<button class="btn" onClick={() => {
props.dispatch({ type: 'plus', payload: props.cartState.id })
}}>+</button>
<button class="minusBtn btn" onClick={() => {
props.dispatch({ type: 'substract', payload: props.cartState.id })
}}>-</button>
</td>
</tr>
)
})
}
</tbody>
</Table></div>
);
};function shoeProps(state) {
return {
state: state.reducer,
lestState: state.reducer2,
cartState: state.reducer3
}
}
export default connect(shoeProps)(Cart);state값을 index.js 파일에 cartState라는 값으로 불러왔고, 그 외는 강의와 똑같이 구성해보았습니다!
아래는 index.js 파일에서 수량증감과 관련된 리듀서 부분입니다
let cartState = [];
// cart 데이터
function reducer3(state = cartState, action) {
// 주문하기 누르면 cart에 항목 추가
if (action.type === 'cartAdd') {
let found = state.findIndex((a) => { return a.id === action.payload.id })
if (found >= 0) {
let setCart = [...state];
//setCart[found] = action.payload;
setCart[found].quan++;
return setCart;
}
else{
let setCart =[...state];
setCart.push(action.payload)
return setCart;
}
}// cart에 수량증감 ---------------------------수량증감 관련된 action과 payload가 정의된 부분입니다!
else if (action.type === 'plus') {
let setCart = [...state];
console.log(setCart) << 상품을 추가할 때마다, 콘솔을 찍어보면 [ {id:1, title:"Red Knit", quan:1}, {id:0, title:"White&black", quan:1}, ... ] 와 같이 정상적으로 배열이 추가됩니다
setCart[action.payload].quan++;
console.log(setCart)
return setCart
}else if (action.type === 'substract') {
let setCart = [...state]
if (setCart[action.payload].quan > 0) {
setCart[action.payload].quan--;
return setCart
}
else {
return 0
}
}else {
return state
}
}위와 같은 코드로 실행했을 때, 오류메시지가 뜨는 부분은 아래와 같습니다
TypeError: Cannot read property 'quan' of undefined
위의 오류를 이해하기 위해 여러 시도를 하다가 문득 의문점이 들어서 질문드립니다!
제가 id가 3인 상품을 장바구니에 담고, 그 이후 id가 0인 상품을 장바구니에 추가했다면
장바구니에는 담기는 순서가 (id가 3인 상품 > id가 0인 상품) 순으로 담깁니다
여기서 첫 번째 상품(id가 3인 상품)의 수량증가버튼(+)을 클릭하면,
index.js에 정의되어있는 action.type === "plus" 에 의하면 아래처럼 해석해서 생각이 됩니다
else if (action.type === 'plus') { // id가 3인 상품의 "플러스" 버튼을 누릅니다
let setCart = [...state]; // cartState는 빈배열이나, 플러스 버튼을 통해 id가 3인 상품의 객체가 담깁니다
console.log(setCart) // 콘솔로 확인해보면 [{id: 3, title: "상품명" , quan: 1}]
setCart[action.payload].quan++; // 에러가 발생한 부분
console.log(setCart)
return setCart
}에러가 발생한 이유가,
setCart[action.payload].quan++; 부분에 실질적으로 들어오는 값이
setCart[3].quan++; 가 되면
장바구니 리스트에서는 첫 번째[0] 상품의 수량증감을 설정하는데 id가 3인 상품을 setCart에 넣으면
setCart[3].quan++; 가 되어버려서 오류가 나는 것이 아닐까 하는 추측을 했습니다
제가 잘못된 방향으로 접근하고 있는 것 같기도 하고, 오류에 대한 해결 방안도 찾지 못하여 질문드립니다!
- 답변은 로그인 후 가능합니다.