인프런 커뮤니티 질문&답변
작성한 질문수
checkbox onChange 적용 시 오류
작성
·
190
0
checkbox를 클릭할 때 아래와 같은 오류가 발생합니다.
코드는 동일하게 작성한 것 같은데 원인이 무었일까요?
답변 3
0
0
안녕하세요 이정환입니다.
공유주신 정보로만 살펴봤을 때에는 List 컴포넌트가 부모로부터 전달받는 todos 값에 문제가 있는 것 같습니다. React Developer Tools나 console.log 등의 도구를 통해 확인해보셔야 할 것 같습니다.
정확한 원인을 파악하기 위해서는 전체 코드 확인이 필요합니다. 질문 가이드라인을 참고하시어 전체 프로젝트 코드를 깃허브 등을 통해 링크로 답글 남겨주세요
답변 감사합니다. 원인은 map() 함수를 아래처럼 잘못 사용했었네요.^^( {} 를 제거해야 되는데...)
return state.map((todo) => {
todo.id === action.targetId
? {
...todo,
isDone: !todo.isDone,
}
: todo
});0
안녕하세요, 인프런 AI 인턴입니다.
jnj45님, 주신 문제는 checkbox 클릭 시 발생하는 에러로 보입니다. 오류 메시지에 따르면 map 함수 내에서 filteredTodos에 포함된 항목 중 하나가 undefined일 수 있으며, 이에 따라 id 속성을 읽으려다 에러가 발생한 것 같습니다.
이 문제를 해결하는 방법은 다음과 같습니다:
데이터 검증: 먼저
filteredTodos에 어떤 데이터가 들어가고 있는지, 충분히 검증하는 것이 중요합니다.console.log(filteredTodos)를 이용해 데이터 구조나 값이 정상인지 확인해 보세요.초기 값 확인:
filteredTodos리스트 초기값과 데이터가 비어있을 때의 처리 방법도 검토할 필요가 있습니다. 적절한 초기 값 설정과 빈 값에 대한 방어 코드가 필요합니다.조건부 렌더링:
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’) (질문)와 같은 유사한 오류를 해결한 사례입니다. 이 게시물에서 비슷한 상황과 해결 방안을 확인할 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
안녕하세요 이정환입니다. 오류메세지에 나와 있듯이 List 컴포넌트에서 id 라는 프로퍼티를 읽는 도중 오류가 발생하고 있네요 한번 확인해보시면 좋겠습니다.
파악이 어려우시다면, 정확한 문제 원인 파악을 위해서는 전체 프로젝트 코드가 필요합니다. 질문 가이드라인을 확인하셔서 새로운 질문으로 GitHub 또는 구글 드라이브 링크를 통해 프로젝트 코드를 전달해주세요 (텍스트 복사 붙여넣기 아닙니다 ..!)