codestates / codestates/ThereWeather

[Error Handling] Batched State

Open
#68 1 comment 0 reactions 0 assignees View on GitHub
client error 해결중
Dominant language
JavaScript
Stars
0
Forks
3
PR merge metrics
No merged PRs in 30d

Description

## 어떤 에러인가요?
- 에러는 아니다.
- state 변수 `clickedWeatherButtons`의 값이 예상보다 한 박자 늦게 변한다.

## 에러 메시지
```javascript
// 날씨 필터링용 state - 배열
const [ clickedWeatherButtons, setClickedWeatherButtons ] = useState([]);

// 날씨 버튼 onClick handler
const weatherBtnHandler = (e) => {
if (e.target.nodeName === 'ARTICLE') return;

let elem = e.target;
while (!elem.classList.contains('weatherButton')) {
elem = elem.parentNode;
}

if (clickedWeatherButtons.includes(elem.name)) {
setClickedWeatherButtons(arr => {
return [...arr.filter(btnName => btnName !== elem.name)];
});
console.log('배열에서 빼기', clickedWeatherButtons);
} else {
setClickedWeatherButtons(arr => {
return [...arr, elem.name];
});
console.log('배열에 넣기', clickedWeatherButtons);
}
}

useEffect (() => {
console.log('useEffect', clickedWeatherButtons);
},[clickedWeatherButtons]);
```

buttons

![console-screenshot](https://i.imgur.com/uJUAd9W.png)

## 에러 핸들링 방법
### 질문
- `clickedWeatherButtons`의 값이, 버튼 클릭 이벤트 함수에서 찍었을 때와 useEffect에서 찍었을 때 각각 다른 이유
- 서버와의 통신
- axios로 `clickedWeatherButtons`의 값을 보낼 때
- `clickedWeatherButtons`를 보내도 괜찮을지
- useEffect를 사용해야 한다면 어떻게 해야할지

## 에러 핸들링을 위해 참고한 레퍼런스 링크
- [React batched update 그리고 react-redux](https://medium.com/tapjoykorea/react-batched-update-%EA%B7%B8%EB%A6%AC%EA%B3%A0-react-redux-connect-%ED%95%A8%EC%88%98-c9779e8db1fe)
- [React 적용 가이드 - React 작동 방법
](https://d2.naver.com/helloworld/9297403#ch2)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.