작성한 질문수 8

0

삭제된 글입니다

0

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

공유주신 정보로만 살펴봤을 때에는 List 컴포넌트가 부모로부터 전달받는 todos 값에 문제가 있는 것 같습니다. React Developer Tools나 console.log 등의 도구를 통해 확인해보셔야 할 것 같습니다.

정확한 원인을 파악하기 위해서는 전체 코드 확인이 필요합니다. 질문 가이드라인을 참고하시어 전체 프로젝트 코드를 깃허브 등을 통해 링크로 답글 남겨주세요

return state.map((todo) => {
        todo.id === action.targetId
          ? {
              ...todo,
              isDone: !todo.isDone,
            }
          : todo
      });

0

안녕하세요, 인프런 AI 인턴입니다.

jnj45님, 주신 문제는 checkbox 클릭 시 발생하는 에러로 보입니다. 오류 메시지에 따르면 map 함수 내에서 filteredTodos에 포함된 항목 중 하나가 undefined일 수 있으며, 이에 따라 id 속성을 읽으려다 에러가 발생한 것 같습니다.

이 문제를 해결하는 방법은 다음과 같습니다:

1. 데이터 검증: 먼저 filteredTodos에 어떤 데이터가 들어가고 있는지, 충분히 검증하는 것이 중요합니다. console.log(filteredTodos)를 이용해 데이터 구조나 값이 정상인지 확인해 보세요.

2. 초기 값 확인: filteredTodos 리스트 초기값과 데이터가 비어있을 때의 처리 방법도 검토할 필요가 있습니다. 적절한 초기 값 설정과 빈 값에 대한 방어 코드가 필요합니다.

3. 조건부 렌더링: map 함수 내에서 항목이 undefined가 아닌지 검사하도록 하고, 없는 경우 체크박스 대신 기본 콘텐츠나 경고 메시지를 보여주도록 구현하는 것도 방법입니다.

아래와 같은 사용자 정의 검사기를 통해 문제를 피할 수 있습니다:

<div className="todoWrapper">
  {(filteredTodos || []).map((todo) => {
    if (!todo) return null; // 또는 여기서 기본 값을 반환하거나 에러 메시지를 표시
    return (
      <TodoItem
        {...todo}
        key={todo.id}
        deleteTodo={deleteTodo}
        updateTodos={updateTodos}
      />
    );
  })}
</div>

위의 예시는 filteredTodos가 null이나 undefined일 때도 비어있는 배열로 취급하여 map 함수를 안전하게 사용할 수 있도록 합니다.

아래 링크는 Uncaught TypeError: Cannot read properties of undefined (reading ‘id’) (질문)와 같은 유사한 오류를 해결한 사례입니다. 이 게시물에서 비슷한 상황과 해결 방안을 확인할 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.