[Error] A component is changing an uncontrolled input to be controlled 오류 해결방법

에러 발생

Formik을 사용하면서 SelectBox에서 선택한 text가 input 창에 입력되지 않는 오류가 발생했는데, 크롬 console창에는 다음과 같은 오류가 나타났다.

A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component

 

에러 원인

input 태그의 value가 undefined 값이 들어갈 수도 있으면 발생하는 에러라고 한다. uncontrolled input이었다가 controlled input으로 바뀌면서 발생하는데, 초기값이 undefined였다가 렌더링 후에 값이 들어와 바뀌면서 에러가 발생한다고 한다.

return(
    <SelectBox name="student" value={student.name}/>
)

 

 

해결방법

('')공백을 줘서 controlled input의 범주에 포함시켜주시면 해결할 수 있다.

return(
    <SelectBox name="student" value={student.name || ""}/>
)

 

 

참고

https://itprogramming119.tistory.com/entry/A-component-is-changing-an-uncontrolled-input-to-be-controlled-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95