[React로 만든 쇼핑몰]오류 해결하기

버튼을 3번 클릭하면 "상품이 더 없습니다" 라는 alert 창을 보여주도록 코드를 작성하였는데

여기서 문제가 발생했다 버튼을 3번 클릭하고 input에 값을 입력할때마다 alert창이 띄워지는것,,,

 

문제의 원인은 버튼의 값을 usestate에 저장해주었기 때문에 클릭을 3번한 값이 계속 저장이 되어있는 상태이기 때문이다

이를 해결하기 위해서 내가 생각해본 방법은 버튼을 3번클릭하면 버튼의 값을 변경해 state값을 변경해주는것!!

function BtClick(props) {
  useEffect(() => {
    props.버튼변경(false);
  }, [버튼 == 3]);

  useEffect(() => {
    if (props.버튼 == 1) {
      axios
        .get("https://codingapple1.github.io/shop/data2.json")
        .then((result) => {
          let copy = [...props.item, ...result.data];
          props.setitem(copy);
        })
        .catch((err) => console.log(err));
    }
    if (props.버튼 == 2) {
      axios
        .get("https://codingapple1.github.io/shop/data3.json")
        .then((result) => {
          let copy = [...props.item, ...result.data];
          props.setitem(copy);
        })
        .catch((err) => console.log(err));
    }
  }, [props.버튼]);

  if (props.버튼 == 3) {
    return alert("상품이 더 없습니다");
  }
}

이렇게하면 input에 값을 입력해도 alert창이 안뜹니당 ㅎ,ㅎ

더나은 방법이 있다면 댓글 부탁 드려용 ,,,❤