리액트 인풋 관련 에러-Warning: A component is changing an uncontrolled input to be controlled.
문제상황
처음 페이지에 들어갔을땐 발생하지 않는데 새로고침을 했을 시 콘솔에 위와 같은 에러메시지가 출력되는 상황이다.
<div>
<span>아이디</span>
<Input
onChange={onChange}
value={userID}
type="text"
placeholder="아이디를 입력해주세요."
required
/>
</div>
해결과정
아마 위의 컴포넌트는 부모 컴포넌트를 통해 props를 전달받아야 하는데 새로고침으로 값을 전달받지 못해undefined가 들어가서 그런 듯했다.
그래서 일단 인풋에 || 연산자로 undefined일 때 공백을 지정해주었다.
<div>
<span>아이디</span>
<Input
onChange={onChange}
value={userID || ""}
type="text"
placeholder="아이디를 입력해주세요."
required
/>
</div>
바로 해결이 되었다...
'트러블슈팅' 카테고리의 다른 글
SSE(Server-Sent Events)를 활용한 실시간 알림 시스템 개선 (6) | 2024.11.03 |
---|---|
[Prisma] 카테고리와 옵션 데이터의 중복 및 관리 문제 (0) | 2024.11.01 |
[Chart.js] Canvas is already in use. Chart with ID '0' must be destroyed before the canvas with ID 'myChart' can be reused. (0) | 2024.08.05 |
TypeError: Cannot read properties of undefined (reading 'length') (0) | 2024.08.01 |
CORS Error를 만나다 (0) | 2024.07.25 |