[TIL]2024.02.06 React 개인과제 트러블슈팅

개인 과제가 끝나고 복습겸 해설영상 보면서 다시 한번 코드작성을 하던도중

ERROR
letters.filter is not a function
TypeError: letters.filter is not a function
at LetterList (http://localhost:3001/static/js/bundle.js:717:35)
at renderWithHooks (http://localhost:3001/static/js/bundle.js:25730:22)
at mountIndeterminateComponent (http://localhost:3001/static/js/bundle.js:29014:17)
at beginWork (http://localhost:3001/static/js/bundle.js:30310:20)
at HTMLUnknownElement.callCallback (http://localhost:3001/static/js/bundle.js:15326:18)
at Object.invokeGuardedCallbackDev (http://localhost:3001/static/js/bundle.js:15370:20)
at invokeGuardedCallback (http://localhost:3001/static/js/bundle.js:15427:35)
at beginWork$1 (http://localhost:3001/static/js/bundle.js:35291:11)
at performUnitOfWork (http://localhost:3001/static/js/bundle.js:34539:16)
at workLoopSync (http://localhost:3001/static/js/bundle.js:34462:9)

어지러운 오류를 봤는데 이게 뭔가 싶어서 봤더니
대충 Detail 컴포넌트에서 사용하는 letters.find 메서드에서 문제가 발생한줄로 생각했다.

function Detail({ letters }) {
  const { id } = useParams();
  const { avatar, nickname, createdAt, writedTo, content } = letters.find(
    (letter) => letter.id === id
  );

letters 배열의 id 값과 useParams로부터 받아온 id 값은 형식이 다른건가? 싶어서

function Detail({ letters }) {
  const { id } = useParams();
  const { avatar, nickname, createdAt, writedTo, content } = letters.find(
    (letter) => letter.id === String(id)
  );

문자열로도 변경해보고 별의 별짓을 다 해봤는데도 같은 오류가 발생.
결국에는

function AddForm( setLetters )

프롭스를 받는 과정에서 구조분해할당을 빼먹었다. 어이없는 실수에 웃음만 나왔는데 딱 이곳에 오류야 하고 알려주는 것도 아니라서 하나하나 뒤져보기 힘든 부분이 있다.
조금더 집중해서 코드를 짤 필요성이 있는걸까 생각이 든다.