[React] Array.map() is not a function

댓글 삭제를 구현하는데 언제나 그렇듯 TypeError가 발생했다. 사실 이전부터 계속 났던 에러인데 무시하고 있었다가 이제서야 해결한다. 삭제가 되고 나서 자꾸 하얀배경이 뜨길래 처음에는 새로고침이 자동으로 되는줄 알고 새로고침이 안되게 구현을 하려고 했으나 저 에러때문에 그랬던,,,,,

Array.map() is not a function

이게 무슨 에러인지 찾아보니 내가 사용하는 commentData가 배열이 아니라는 의미라고 한다. 그래서 console.log(response)로 확인해봤다.

나는 배열로 잘 저장했는데 왜 에러가 난걸까 하고 구글링 더 해본 결과, 처음에 해당 컴포넌트가 렌더링 할 때 commentData가 받아와있지않으면 당연히 commentData는 아무것도 없으니까 배열이 아니므로 에러가 뜰 수 밖에...

🔑처음 작성한 코드

  {commentData.map((comments) => (
              <CommentWrapper key={comments.comment_id}>

처음에 아무것도 없을 때를 반영하지않기 때문에 배열이 아닌 commentData일 때도 함수가 실행되도록 하면 된다고 많은 사람들이 알려줬다.

🔑수정한 코드

{commentData&&commentData.map((comments) => (
              <CommentWrapper key={comments.comment_id}>

이렇게 작성해주면 되는데 문제는 나는 이상황에도 에러가 사라지지 않았서 이때부터 멘붕,,,, 왜냐면 구글링해서 나온 모든 사람들이 이렇게 해결했기 때문이다. 몇십분동안 구글링하고 생각한 결과 생각보다 단순한 부분을 놓치고 있었다.

🔑최종 수정 코드

 {Array.isArray(commentData) &&
            commentData.map((comments) => (
              <CommentWrapper key={comments.comment_id}>

바로 내가 작성하는 코드는 TypeScript이기 대문에 이렇게 작성을 해줘야 한다.....
멍충멍충.....🥲🥲

🔓전체 코드

const getComment = async () => {
    try {
      const access = localStorage.getItem('accessToken')
      const response = await axios.get( //api주소
        {
          headers: { Authorization: `Bearer ${access}` },
        },
      )
      SetCommentData(response.data)
    } catch (error) {}
  }

  useEffect(() => {
    getComment()
  }, [])
...
{Array.isArray(commentData) &&
            commentData.map((comments) => (
            <CommentWrapper key={comments.comment_id}>

고작 이거 하나로 시간을 너무 오래 쓴 건 아쉽지만 그래도 배워간게 있어서 다행이다😊