map 메서드를 적용할 배열의 값이 왜 undefined인지 로직을 살펴보았다. 메인페이지에 들어서자마자 네브바 컴포넌트가 호출되고 네브바 안의 카트 컴포넌트는 카트에 담긴 데이터리스트를 요청하게 되는데, 사실 백엔드에서는 카트에 담긴 데이터를 보낼 때 토큰이 있는 경우에만 데이터를 보내던 것이었다.
⇒ 즉, API에 호출해서 받은 값은 없는데 이 값을 가지고 map함수를 돌리다가 에러가 난것이었다.
로그인이 되어 있지 않을 때, 즉 로그인 토큰이 발급되어 있지 않을 때는 카트 데이터를 요청하지 않도록 로직을 수정하였다. ⇒ 데이터를 가져오는 함수에 조건문 추가.
const getCartData = () => {
if (token) {
fetch('http://10.58.3.49:8000/orders/cart', {
method: 'GET',
headers: {
AUTHORIZATION: token,
},
})
.then(res => res.json())
.then(res => {
if (res.message === 'EMPTY CART') {
return;
} else {
setCartData(res.result[0].product);
let sum = 0;
res.result[0].product.forEach(product => {
sum = sum + product.quantity;
});
setTotalOrderNum(sum);
}
});
}
};
<div className="SelectQuantityBox">
{ProductData.quantity}
<button className="SelectQuantityPlus" onClick={() => onIncrease(id)}>
+
</button>
<button className="SelectQuantityMinus" onClick={() => onDecrease(id)}>
−
</button>
</div>;
혹은 + 버튼 클릭 시, onIncrease(id)
라는 함수만 작동하고 있었으므로 백엔드에 수량변경을 알리는 로직을 추가했다.
const patchOrderChange = (product_id, target) => {
fetch(`http://13.125.236.223:8000/orders/cart/${product_id}`, {
method: 'PATCH',
headers: {
AUTHORIZATION: token,
},
body: JSON.stringify({
calculation: target,
}),
});
};
patchOrderChange
함수는 product_id
, target
두 개의 인자를 받는다product_id
는 말그대로 해당 상품을 의미, target
은 Back-end에 보내줄 정보(증가 혹은 감소를 나타내는)다.patchOrderChange()
함수를 +,- 버튼이 클릭되는 로직에 추가했다.<div className="SelectQuantityBox">
{ProductData.quantity}
<button
className="SelectQuantityPlus"
onClick={() => {
onIncrease(id);
patchOrderChange(id, 'addition');
}}
>
+
</button>
<button
className="SelectQuantityMinus"
onClick={() => {
onDecrease(id);
patchOrderChange(id, 'subtraction');
}}
>
−
</button>
</div>