React 制作注冊復選框

Question

我們正在就 React 會員注冊做出必要的同意。 但是，這取決於是否同意該復選框，但它不能正常工作，因為它在單擊按鈕時會重新呈現。 任何幫助，將不勝感激。

enter code here
const [disabled, setDisabled] = useState('disabled');
const [agree1, setAgree1] = useState(false);                                //회원정보 동의
const [agree2, setAgree2] = useState(false);                                //개인정보 수집 및 이용동의
const [agree3, setAgree3] = useState(false);                                //위치정보 동의
const [total, settotal] = useState(false);                                   //전체 동의
const [email, setemail] = useState("");

const buttonState = useCallback(() => {
  if((agree1===true)&&(agree2===true)&&(agree3===true)){
    settotal(true);
    setDisabled('');
  }
  else {
    setDisabled('disabled');
  }
},[agree1,agree2,agree3,total]);


 
useEffect(() => {
  buttonState();
}, [buttonState])

const totalchange = () => {
    if(total ===true) {                                                         //전체동의가 true라면 다시 클릭 했을때 전부 unchecked
        settotal(!total);
        setAgree1(!agree1);
        setAgree2(!agree2);
        setAgree3(!agree3);
    } else{                                                                     //그외(하나만 체크되 있거나 아무것도 없다면) 전부 checked로 만듬
    settotal(true);
    setAgree1(true);
    setAgree2(true);
    setAgree3(true);
    setDisabled('');
}
}


const clickFunction = () => {
  axios.get(`/signup/authNum?email=${email}`)
  .then(res => {
    if(window.confirm("인증번호 전송이 완료되었습니다")){
      history.push({
        pathname : '/registerauth',
        state : {state : res.data}
      })
    }
  })
  .catch(err => {console.log(err)})

} enter code here

很抱歉很尷尬，因為這是我關於堆棧溢出的第一個問題

Answer 1

為什么要使用按鈕單擊的回調，為什么要在 useEffect 中調用 function？