Doodream
48
2021-04-15 23:11:01
1
90

[React] useEffect()에서 의존성 배열을 감지를 못합니다.



const [product, setProduct] = useState(data);
const [cart, setCart] = useState(typeof window !== "undefined" ? JSON.parse(window.localStorage.getItem('cart')) : null);
const removeToCart = (id) => {
console.log(cart, "removeToCart");
var index = cart.findIndex(item => item.id === id);
setProduct(data);
if (cart.length <= 1) {
setCart([]);
window.localStorage.removeItem('cart');
return
}
var newCart = cart;
newCart.splice(index, 1)
setCart(newCart);
}

useEffect(() => {
console.log(cart, "Cart Change");
getTotalPrice();
window.localStorage.setItem('cart', JSON.stringify(cart));
}, [cart])

useEffect(() => {
console.log(product, "product Change");
}, [product])

이렇게 상태변수의 정의와 useEffect 함수가 의존성 배열로이어져 있습니다. removeToCart() 함수를 진행 시키면
진행이 되서 상태변수가 합니다. 그런데 useEffect()에 의존성 배열로 넣어 놓은 상태변수들을 감지를 못합니다.

useEffect()가 감지를 하는 경우는 첫 removeToCart()함수를 실행했을 때 감지하고 연속해서 실행하면 감지를 안합니다.
removeToCart()는 분명히 상태변수를 변화 시키는데도 불구하고.. 이유가 뭘까요? 분명히 useEffect()에 의해 변하는 걸 확인하고
배포 했는데 이럽니다...
0
  • 답변 1

  • neor
    3
    2021-04-16 05:59:22
    var newCart = [...cart];

  • 로그인을 하시면 답변을 등록할 수 있습니다.