코드스테이츠 소프트웨어엔지지어링 부트캠프 +60, Cmarket 스프린트

 

문제

오늘 Cmarket 스프린트를 했다. 

 

기능구현이 안됨

 

콘솔창에는 어떤 에러도 뜨지 않았지만 기능 구현이 되질 않았다.

 

문제의 부분

const [cartItems, setCartItems] = useState(initialState.cartItems);

 function changeQuantity(quantity,itemId){
	
    const filtered = cartItems.filter(el=>el.itemId === itemId)
    
    //state변수인 cartItems가 수정되고 있어서 안된다고 생각했는데 그거도 아니다.   
    filtered[0].quantity++  

	setCartItems(cartItems)
}

setCartItems(cartItems)

콘솔창을 이용한 수동 디버깅

콘솔창을 확인하니 console.log가 실행되지 않았다.

 

 

해결 

우선 문제해결은 했는데 이유는 잘 모르겠다. 

 

처음에는 state를 직접수정했기 때문이라고 생각했는데, 또 다른 곳을 보면 똑같은 방식으로 해도 기능구현이 잘 되었다.

 

여기저기 구글링하고 콘솔창으로 이것저것 실험해보았지만 답을 찾지 못했다. 

 

문제의 부분

const [cartItems, setCartItems] = useState(initialState.cartItems);
.
.
//cartItems를 바꾸는내용
  function changeQuantity(quantity,itemId){
	
    const filtered = cartItems.filter(el=>el.itemId === itemId)
    
    //state변수인 cartItems가 수정되고 있어서 안된다고 생각했는데 그거도 아니다.   
    filtered[0].quantity++  

	setCartItems(cartItems)
}

========
다른 기능
  function addToCart(itemId){
    const filtered = cartItems.filter(el=>el.itemId === itemId)
    if(filtered.length!==0){
      filtered[0].quantity++ // <<여기서도 state변수가 변하고 있는데
     
      setCartItems(cartItems) // << 여기서는 문제없이 잘 작동된다.
      
      console.log('add',cartItems)
    }

 

 

map을 이용해 다음과 같이 바꿔주니 해결되었다.

 

function changeQuantity(quantity,itemId){
    
    const filtered = cartItems.filter(el=>el.itemId === itemId)[0]
   
    filtered.quantity = quantity << 여기서 부터 이미 state가 수정된다. 왜 이건 되는거지..
    
  
    let k= cartItems.map(el=>{
      if(el.itemId===filtered[0].itemId){
        return filtered[0]
      }else return el
    })
  
    setCartItems(k)

    
  }