React 프로젝트를 진행하는 도 중 다음과 같은 에러가 발생하였다.

input 컴포넌트에 에러가 생긴 듯하다. 그래서 구글에 검색해보니 많은 사람들이 같은 오류를 경험한 것을 확인할 수 있었다.
해당 에러가 발생한 이유는 input에 입력한 value 값이 undefined가 들어갔을 때의 예외처리를 안해줘서 발생한 것 같다.
다른 사람들의 해결방법으로는 value 값에 || ""을 추가해줘서 undefined값일 경우에는 ""으로 처리해준다고 입력해주면 된다.
<input
type="text"
name="username"
value={enteredUsername || ""}
onChange={usernameChangeHandler}
/>
그런데 나의 경우에는 useState("")로 초기값이 "" 이라고 설정했는데 이런 오류가 뜨지?라고 생각했는데 onChange 함수로 input의 value 값을 변경하고 나서 value 값을 입력 안 하고 다음과 입력값을 초기화하기 위하여 setEnteredUserName을 호출할 때 ""을 입력을 안 한 것을 확인했다.

그래서 함수에 ""을 추가해주니 오류가 해결되었다.
setEnteredUsername("");
setEnteredAge("");
'프로그래밍 > 트러블슈팅(trouble shooting)' 카테고리의 다른 글
[truffle] truffle migration 오류(TypeError: Cannot read properties of undefined (reading 'call') at lastCompletedMigration) (0) | 2023.03.08 |
---|---|
[JavaScript] Uncaught RangeError: Maximum call stack size exceeded (0) | 2023.01.20 |
[Node.js] Node.js 버전 오류 및 버전 변경 방법 (0) | 2022.10.27 |
[three.js] setSize() 오류, 생성자 함수 오류 (0) | 2022.10.20 |
[Git] git MERGE_HEAD exists 문제 해결하기 (merge 취소하기) (0) | 2022.07.07 |