[배열, react state]배열안에 객체 중복 파악하기

장바구니 담기 기능을 구현하던중

해당 상품이 이미 장바구니에 담겨있는가를 파악해야 했다.

장바구니에담길배열.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)
  };

이런식으로 만들었다. 잘되고 이상한 문제들도 다 해결되었다.

굳굳