onClick = useNavigate 실행 순서 오류 / 2개 함수를 실행 할 때는 순서 맞게 정리하기

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'value')

 

전 포스팅에서 usehistory와 useNavigate를 비교하여 navigate를 사용해야겠다고 작성했었다.

근데 바로 그냥 오류가 나버리죠?

결국에는 onClick에 두개의 함수를 쓰니 작동이 안됐던건줄 알고 포스팅 까지 다했는데 거기서 또 안됐다

해결이 어려워 팀원분에게 물어보니 답변을 주셨다ㅠㅠㅠ 감사합니다

history와는 다르게 navigate는 같이 써놓으면 페이지 이동이 안된다. 정확한 이유를 아직 못찾았지만

예상하기는 히스토리는 바로 넘겨주지만 네비게이트는 넘어갈 페이지와 현재페이지가 연동이 되야 한다는데 로그인 처리를 하고 데이터를 가져오느라 페이지 연동확인이 안되서 넘어가지 않는것 같다.

---

 

1. 이유

회원가입 버튼에 만들어둔 signupFB로 파이어베이스에 값을 넣어주고 있었다 근데 어젯밤에 당연히 되니까 navigate를 넣어 페이지이동을 넣고 잠들었는데 회원가입을 만지던 중 firebase에 데이터가 안들어가고 있드라..

 

 

2. 확인

그래서 확인 해보니 

  const navigate = useNavigate();
  
  ...
        <button onClick={() => {
              signupFB();
              navigate("/");
            }}>회원가입하기</button >

navigate와 주소값을 저렇게 적기만 했는데 데이터가 안들어가고 상관없는 addDoc부분에서 오류가 나더라

그래서 버튼에 문제인가 싶어 버튼을 고쳐보고 navi를 단 후에 오류인것 같아 2개 함수가 가능한지 보다가 함수를 아예 새로 잡아 주소값까지 주는것을 보았다

 

3. 변경사항

  const gohome = () => {
    return <useNavigate to="/home" />;
  }
  
  ...
  
          <button onClick={() => {
              signupFB();
              gohome();
            }}>회원가입하기</button >

gohome이라는 변수에 주소값까지 넣었고 밑에는 gohome();로 signupFB();와 같은 실행함수로 넣어줬다

근데 이래도 안됐다!

 

그래서 다른 분이 답변해준게 firebase랑 연결되어있어 처리가 되기 전에 페이지 이동하려다보니 오류가 나는것 같으니 회원가입과, 로그인 코드가 끝나는 함수 뒤에다 옮겨보라고 하신다. 해보니 작동된다.. 대박;

항상 코드에 오타나 이게 아니라 다른 함수를 써야하나 생각했는데 진정한 개발자 사고방식 같았다. 실행 순서를 맞춰줘야한다는... async,await도 앞에 있는데 알아보지 못했다 navigate 도 그럴수 있다는걸

그래서 옮겨 보았다 어디다가 옮겼냐!

맨끝부분으로 옮겨갔다 그러니까 작동이 되드라. 실행 순서 차이 onclick을 누르면 두 개의 함수가 바로 실행 되니 로그인이 끝나고 할 수 있게 만들어주는것. 하나 알아 갑니다 감사합니다!

 

 

https://basemenks.tistory.com/278

react 에서 navigate 사용하기 (useNavigate / Navigate)