codestates / codestates/AnimalChat
[Error Handling] Expected an assignment or function call and instead saw an expression
- Dominant language
- JavaScript
- Stars
- 0
- Forks
- 3
- PR merge metrics
- No merged PRs in 30d
Description
## 어떤 에러인가요?
- 에러 발생 지점
```jsx
{
(newPwd) => {
const regOnlyNumber = /^[0-9]/; // 숫자만
regOnlyNumber.test(newPwd) ?
문자를 포함해야 합니다
:
'';
}
}
{
(newPwd) => {
const regOnlyAlphabets = /^[a-zA-Z]*$/; // 문자만
regOnlyAlphabets.test(newPwd) ?
숫자를 포함해야 합니다
:
'';
}
}
```
```jsx
{() => {
// 비밀번호 유효성 검사용 정규식
const regOnlyNumber = /^[0-9]/; // 숫자만
const regOnlyAlphabets = /^[a-zA-Z]*$/; // 문자만
// newPwd 유효성검사
let isOnlyNumber = regOnlyNumber.test(newPwd);
let isOnlyAlphabets = regOnlyAlphabets.test(newPwd);
return isOnlyNumber || isOnlyAlphabets ?
문자와 숫자를 모두 사용해야 합니다
:
''
}}
```
## 에러 메시지
```Plain
Expected an assignment or function call and instead saw an expression no-unused-expressions
```
```Plain
Functions are not valid as a React child.
```
## 에러 핸들링 방법
1. **원인**
- 스테이트를 이용해서 유효성 검사 조건 문장을 렌더링하려 하였으나 잘 되지 않아서, 리턴문 안에서 인라인으로 함수를 사용했다
- 부적절한 선택이었음
2. **진행 중**
- 에러 메세지는 없으나 조건을 충족해도 경고 메세지가 바로 사라지지 않는 문제가 있음
```jsx
const [ typeErrorMessage, setTypeErrorMessage ] = useState('');
useEffect(() => {
// 비밀번호 유효성 검사용 정규식
const regPassword = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z]{4,15}$/; // 비밀번호 전체
// newPwd 유효성검사
const isValidPwd = regPassword.test(inputs.newPwd);
const isIncludingBothTypes = (str) => {
const regOnlyNumber = /^[0-9]/; // 숫자만
const regOnlyAlphabets = /^[a-zA-Z]*$/; // 문자만
let isOnlyNumber = regOnlyNumber.test(str);
let isOnlyAlphabets = regOnlyAlphabets.test(str);
if (isOnlyNumber || isOnlyAlphabets) {
setTypeErrorMessage('문자와 숫자를 모두 사용해야 합니다')
} else {
setTypeErrorMessage('')
}
}
if (isValidPwd) {
setIsNewPwdValid(true);
} else {
setIsNewPwdValid(false);
isIncludingBothTypes(inputs.newPwd);
}
}, [inputs.newPwd]);
// ...
return {typeErrorMessage};
```
3. 레퍼런스 링크 2번을 통해 set 함수에 콜백 함수를 넣는 해결 방식이 존재함을 알게 되었다🤭...!
## 에러 핸들링을 위해 참고한 레퍼런스 링크
1. [무리's Blog - [React.js] Expected an assignment or function call and instead saw an expression 오류 해결법](https://life-of-panda.tistory.com/28)
2. [useState boolean 값 안바뀌는 경우 해결
](https://kyounghwan01.github.io/blog/React/boolean-useState-not-working/)
3. [7. useState 를 통해 컴포넌트에서 바뀌는 값 관리하기
](https://react.vlpt.us/basic/07-useState.html)
4. [리액트 공식 문서 - 함수적 갱신](https://ko.reactjs.org/docs/hooks-reference.html#functional-updates)
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.