[React] 반복문 내부의 setState()

반복문 내에서 state를 변경하기 위해 setState()를 쓰는 경우 원하는 결과와 다른 결과가 나오게 된다.

데이터를 쌓기 위해 반복문을 돌리는데 데이터가 쌓이지 않고, 첫 데이터 혹은 마지막 데이터만 쌓이게 된다.

이유가 뭘까?

setState()를 호출 시 상태가 즉각적으로 업데이트 되지 않고, Promise를 통해 상태를 변화시킨다.
즉, 비동기적으로 처리되는데 요청 완료 전에 새로운 요청이 들어와 업데이트 되기 전 값을 기준으로 다시 처리하려고 하기 때문이다.

해결 방법?

그냥 필요한 데이터를 변수에 담아서 처리했다. 반복문내에서 변수에 담아 반복문이 끝난 후, setState()를 이용해 값을 변경시켜줬다.