codestates / codestates/ThereWeather
[Error Handling] Batched State
- 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]);
```


## 에러 핸들링 방법
### 질문
- `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.