[에러노트] 리액트 input 입력 시 에러

Wonny·2023년 1월 6일
0

에러노트

목록 보기
4/6

에러발생 상황

Warning : A component is changing an uncontrolled input of type undefined to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

타입이 checkbox인 input을 클릭 했을때 위 warning이 발생했다.

해당 에러가 뜨는 이유를 알 수 없어서 찾아본 결과,
Input의 value값으로 undefined가 들어갈 경우 발생하는 경고라고 한다.

내가 따로 input의 value값을 설정해주지 않아 생긴 에러이다.
콘솔에 input.value를 찍었을때, on이 찍혀서 따로 value값을 넣지 않았는데 그게 아니었나 보다.

해결 방법

input.value를 값을 넣어도 해당 오류가 계속 발생하였다.

아마 위의 컴포넌트는 부모 컴포넌트를 통해 props를 전달받아야 하는데 새로고침으로 값을 전달받이 못해 undefined가 들어가서 그런 듯했다.

그래서 일단 input에 || 연산자로 undefined일 때 공백을 지정해주면 해결이 되었다.

<input value={'text' || ''}/>
profile
프론트엔드 개발자를 꿈꾸며

0개의 댓글