[react]KakaoSocialログインの400エラーコードを決めましょう!

機能実装はある程度まで行われており,すでに起動しており,開発者ツールでKakaログインボタンをクリックするまでfetchリクエストがあり,エラーコードが絶えない.問題がどこにあるかを知るために、開発者のツールを開き、ネットラベルを開き、エラーが発生したコードがどの行なのかを見て、長い間悩んでいましたが、使用効果の問題であることしか知らず、どのように解決すればいいのか分からず、最後にチームメンバーに問題を提起しましたが、チームメンバーもよく分からず、最終的に指導者に助けを求めました.どのような点が不足しているかを知り,コードを修正し,最終的に解決した.
私の問題はuseEffectについてよく知っていることです.

続くBad Requestの宴...
問題は、Kakaoに承認コードを送信するために、aリンクが最初にレンダリングされるので、リクエストが問題になります.
問題の解決はuseEffectに条件を入れて解決する.

const getToken = async () => {
    try {
      await fetch('https://kauth.kakao.com/oauth/token', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
        },
        body,
      })
        .then(res => res.json())
        .then(data => {
          localStorage.setItem('kakao_token', data.access_token);
          sendToken();
        });
    } catch (err) {
      console.error(err);
    }
  };

  const sendToken = async () => {
    try {
      await fetch('http://10.58.2.49:8000/users/login', {
        method: 'GET',
        headers: { Authorization: localStorage.getItem('kakao_token') },
      })
        .then(res => res.json())
        .then(data => {
          localStorage.setItem('access_token', data.access_token);
          navigate('/');
        });
    } catch (err) {
      console.error(err);
    }
  };


  useEffect(() => {
    if (code) {
      getToken();
    }
  }, [code]);

そうすると、最終コードが入りますが、getokenを実行させ、コード(kakaoから受け取った承認コード)が入ってくると、kakakaoからtokenを受け取ります.
このようにして無条件に要求を出すのではなく、入ってきたときだけ要求を出すので、400エラーの要求は発生しません.
[コード修正後の画面]