인프런 커뮤니티 질문&답변

안녕하세요 다정님 이정환입니다.

오류의 원인 찾았습니다 😃

문제는 App.jsx의 reducer 함수에 있더군요

아래 그림으로 첨부해드린 reducer 함수의 UPDATE 케이스를 잘 보시면 state.map 메서드가 아무런 값도 리턴하지 않는걸 보실 수 있습니다. 왜냐면 화살표 함수를 중괄호로 묶어주셨기 때문입니다.

아마 알고계시겠지만 화살표 함수는 화살표 뒤에 중괄호가 나오는 순간 일반 함수와 동일하게 return 문을 직접 사용해야만 값의 리턴이 이루어집니다. 따라서 map 메서드의 중괄호를 지워주시거나 혹은 return문으로 삼항 연산자의 결과값을 반환해 주셔야 정상적으로 수정이 동작하게 될 겁니다.

추가로 문제의 원인을 파악하는 방법은 일단 오류의 메세지를 따라가보셔야 합니다. 그러다가 다정님이 말씀하신 것 처럼 getMonthlyData에서 item의 값이 undefiend이 되는것 같다면 거기서부터도 역 추적으로 올라가 보시면됩니다.

저의 경우에는 다음 순서로 문제를 찾았습니다.

1. getMonthlyData 함수에서 item의 값이 undefined으로 설정되는 것 확인

2. 이 item을 저장하는 배열인 data 배열의 값을 콘솔에 출력해보니 [ undefined, undefiend, undefiend ] 으로 출력되는 것을 확인

3. data 배열은 결국 매개변수로 전달된 App 컴포넌트의 data State이므로 수정 액션이 발생했을 때의 코드를 확인하기 위해 reducer 함수를 확인 -> 문제 식별

말씀주신대로 제가 프라이빗 레포로 만들고 링크를 올렸었네

확인하고 올렸어어하는데 죄송합니다ㅠ-ㅠ

https://github.com/dajungleee/section12

12.15) Edit 페이지 구현하기 를 따라하는 중이었는데

작성완료를 눌렀을때 alret 까지는 뜨는 그 후 빈화면과 함께 하단과 같은 에러가 뜹니다

디버깅해보았을떄 getMonthData 에서 item 을 못찾는게 원인인거같긴한데..
더이상 어떻게 찾아야할지모르겠어서 질문남깁니다..ㅠ

인프런 커뮤니티 사용이 처음이라 글작성이 미숙해서 죄송합니다

그리고 이런식으로 에러가났을때 어떻게 원인을 찾는지 방법을 잘모르겠습니다.. 그냥 코드를 따라가서 콘솔을 찍어보고 디버깅 확인해보는정도 해보는거같은데 어떠한 스탭으로 찾아보고 시도해볼지 아직잘모르겟는데 조언부탁드립니다..ㅠ

안녕하세요 다정님 이정환입니다.

보내주신 링크가 정확하지 않은 것 같습니다. 404페이지로 리디렉션되네요 다정님 깃허브 프로필에 들어가서도 안보이는걸 보니 아마 프라이빗 레포로 만드시고 링크를 그냥 보내주신 것으로 보입니다.

추가로 ... 오류가 발생한다면 스크린샷이나 오류 메세지를 통해, 언제 어떤 오류가 발생하는지 정도는 알려주시면 좋을 것 같습니다 😢 정보가 극히 제한적이라 오류 파악에 어려움을 겪을 수 있습니다 ㅠㅠ