티스토리 뷰
장바구니 담기 기능을 구현하던중
해당 상품이 이미 장바구니에 담겨있는가를 파악해야 했다.
장바구니에담길배열.map(element => {
const id = element.item;
const value = element.value;
비교대상배열.map(elem => {
if(elem.item === id && elem.value === value){
return(console.log(elem, "해당상품이 이미담겨있습니다"))
}else{
return(console.log("unoverLap"))
}})
})
장바구니 담기를 누르면 해당 상품들이 장바구니에 담길 배열에 들어간체로
비교대상배열과 비교가 이루어져 중복된 객체만을 뽑아낸다.
이 상태에서 문제가 있었다. 뽑아내긴 하는데 리턴부분에 스프레드 연산자로
상태값을 변경시키는놈을 넣으니 작동이 이상하게 되는것
(각각 비교해보다가 처음엔 잘 거르고 다음번에 다시 추가를 시키는둥 아무튼 이상함)
const saveOptions = value => {
value.map(element => {
const id = element.itemid;
const valued = element.value;
let AA = cartValue.findIndex(i => i.itemid === id && i.value === valued);
if (AA === -1) {
setCartValue([...cartValue, element]);
}else{
setState(3)
}
});
};
그래서 다음번 수정한 코드는 이렇다.
map으로 장바구니에 추가될 옵션들을 하나씩 뽑아와서 기존 장바구니에 담긴 배열에 있는 객체들과 비교하여 이미 값이 중복되어있다면 거르고(setState(3)) 중복되어있지 않다면 findIndex 가 -1 을 반환해서 if의 true 부분이 실행되게 한것.
하지만 또 문제가 있었다. 하나씩 각각 추가하면 정상적으로 작동하지만, 인자로 들어오는 추가할 옵션(value)이 1개가 아닌경우에는 인자 배열 안의 맨 마지막놈만 추가가 되는것.
그래서 고민하다가 질문글을 올려보았는데 간단한 문제였다.
setCartValue가 비동기적이라 첫번째 map을 돌아서 변경된 상태로 생각해야하는것이 아닌 초기상태 그대로이기 때문..
그래서 마지막 구문을 돌때만 호출이 되고 마지막놈만 추가가 된 것이었다.
const saveOptions = value => {
value.map(element => {
const id = element.itemid;
const valued = element.value;
let AA = cartValue.findIndex(i => i.itemid === id && i.value === valued);
if (AA === -1) {
setCartValue(cartValue => [...cartValue, element]);
}else{
setState(3)
}
});
};
그래서 이렇게 인자를 받게 만들어놓으면 이전 state를 인자로 받아서 처리하게 된다.
다른 방법
map으로 돌며 setState 를 하는 방법은 좋은 방법이 아니라고 한다.
의도치 못한 결과를 만들어 낼 수 있다고..
map보다는 forEach를 사용하고 빈 배열을 선언한뒤
배열안에 push를 하고 반복문이 종료된후 배열을 setState에 넣는방법을
쓰라고 하셨다.
const saveOptions = value => {
const newCartArr = []
value.forEach( element => {
const id = element.itemid;
const valued = element.value;
let ExistenceStatus = customerOrder.findIndex(i => i.itemid === id && i.value === valued);
if (ExistenceStatus === -1) {
newCartArr.push(element)
console.log("장바구니 추가 실행");
} else {
setCartState(3);
}
});
handleUpdateCart(newCartArr)
};
이런식으로 만들었다. 잘되고 이상한 문제들도 다 해결되었다.
굳굳
'Study > script.js' 카테고리의 다른 글
[자바스크립트]indexOf, findIndex (0) | 2020.02.09 |
---|---|
[자바스크립트] map (0) | 2020.02.03 |
[warning]Nested block is redundant no-lone-blocks (0) | 2020.01.27 |
[자바스크립트 es6]구조분해할당(Destructuring) (0) | 2020.01.15 |
[자바스크립트 배열]findIndex & reduce (0) | 2019.12.26 |