[TIL]API 요청 Error 해결

첫번째 ERROR

[에러] Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

ERROR 의 원인

• 서버에서 주는 데이터가 json 인 것을 모른다.

ERROR 해결

• header 에 json 인 것을 명시하면 해결된다.
  
  

config = headers : { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
       }

그러나 내 코드에서는 heard 를 삽입하는 것이 먹히지 않았다.

다른 해결책

• axios 로 해결 ( axios 는 get 을하면 response를 자동으로 json 데이터로 바꿔주기때문에 위와같은 에러가 나타나지 않는다.)
  
  

그러나 해결하고 나서 바로 다음 에러가 발생하였다.

두번째 ERROR

Uncaught (in promise) TypeError: Cannot read property 'protocol' of null

ERROR 의 원인

• axios 에서 받는 url 이 null 값이다.

ERROR 해결

=> 알고보니 detailFetchUrl 쪽에서 초기 랜더링시에 모든 detail 컴포넌트를 fetch 해오면서 생기는 오류 였다.

세번째 ERROR

index.js:1 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

fetch요청을 여러번 빠르게 하다보니 이런 에러가 나타나는 에러.

https://velog.io/@ohgoodkim/-%EC%97%90%EB%9F%AC%EB%85%B8%ED%8A%B8-Cant-perform-a-React-state-update-on-an-unmounted-component

블로그를보고 useFetch 안에 있는 useEffect 로 커스텀 훅 안에있는 상태들을 초기화해야한다고 감이오고 그렇게 해놨더니 다시 저 에러가 나타나지 않았다.

## 느낀점 api 관련된 에러들을 해결해 가면서 warning 이나 error 구문에 대해서 좀 더 자세히 읽는 습관을 들여야겠다고 생각했다.