CODCODE
80
2020-01-29 21:05:42
6
334

[리액트]함수가 왜 이렇게 작동할까요??ㅜㅜㅜㅜ



	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]);
			}
		});
	};


saveOption 함수의 인자(value)로 배열이 들어오고 그 배열을 map으로 하나씩 꺼내서 element에 넣고

비교할 cartValue 라는 배열에 findIndex 를 통해 동일한 대상이 없다면  -1을 반환하여  AA

에 저장하고 만약 AA가 -1 이라면 그 대상 element를 setCartValue 를 사용해서 기존 state

에 담으려 했습니다.


value에 들어올 배열은 배열안에 오브젝트가 들어있는 모양인데 하나만 들어있기도 하고

복수가 들어있기도 합니다.

하나만 들어있을때는 정상적으로 추가가 되는데

value 배열안에 객체가 두개가 있거나 하면 맨 마지막 element 만 추가가 되더라구요 ㅠㅠ

무슨 문제인지 모르겠습니다..ㅠ

setCartValue 에 그냥 value 를 넣기도 했었는데 그러면 중복된놈을 걸러내질 못하고

그냥 다 추가를 시켜버리더라구요.. 원했던 기능은

장바구니에 상품들이 이미 담겨있고, 내가 장바구니에 다른 상품을 담으려 했을때,

만약 담으려는 상품중 이미 장바구니에 담긴 상품이 있다면 그놈만을 제외하고

담겨있지 않은 상품들만 장바구니에 담는 기능을 만들고 싶었습니다만..ㅠㅠㅠ

결과가 이상하니 슬프네요 ㅠㅠ...

제가 어느부분을 잘못한걸까요?? ㅠㅠㅠㅠ


0
2
  • 답변 6

  • IT공부중
    204
    2020-01-29 21:58:00

    setCartValue 같은 set 함수가 비동기라서 두번째 map 이 실행 될 때도 CartValue가 첫번째 set때문에 바뀐 상태가 아닌 그 전 상태로 되어있어서 그런거 같아요.


    setCartValue(prev => [...prev, element]) 로 하면 될거 같네요!! 되면 된다고 말해주세요 ㅎㅎ

    1
  • CODCODE
    80
    2020-01-29 23:44:52

    헐....하 ㅠㅠㅠㅠ 정말 바보같았네요 ㅠㅠㅠㅠㅠㅠ 너무 감사합니다 잘 되요 ㅠㅠ... 에효 ㅠㅠㅠㅠ 멍청멍청해서 어쩌나..ㅠㅠㅠ 정말 감사합니다 ㅠㅠ

    0
  • IT공부중
    204
    2020-01-30 00:04:01

    된다니 다행이네요 !! ㅎㅎ 같이 열심히 공부합시당

    1
  • CODCODE
    80
    2020-01-30 15:20:28

    넵!!!! 정말 감사합니다!!!! ㅠㅠ

    0
  • RayEarth
    87
    2020-01-30 15:31:04

    map을 사용하시기보다 forEach 혹은 for문을 사용하시는걸 추천드립니다.

    그리고, setState류의 함수를 반복문에서 실행하시는건 좋은 방법이 아닙니다.

    컴포넌트의 state가 변경될 때마다 랜더링을 일으켜 성능상에 문제가될 수도있고,

    원하지 않는 결과를 화면에 보여주게 될 가능성도 있구요.


    아래와 같이 newCartValue라는 array에 원하는 결과값을 담아

    반복문 이후에 setCartValue함수를 실행시키는 방식으로 로직을 바꿔보시기 바랍니다.

    const saveOptions = value => {
      const newCartValue = [];
      value.forEach(el => {
        if (cartValue.findIndex(i => i.itemid === el.itemid && i.value === el.value) {
          newCartValue.push(el);
        }
      })
      setCartValue([...cartValue, newCartValue]);
    }
    1
  • CODCODE
    80
    2020-02-01 18:01:04 작성 2020-02-01 18:24:09 수정됨
    헐! 감사합니다!!! 이런방법도 있군요 ㅠㅠ 새로 고민하고있던 문제까지 한번에 해결됬네요 ㅠ 감사합니다 ㅠㅠㅠ
    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.