리액트 axios로 받은 데이터 state에 담아서쓰기

Question

제가 혼자 포폴만들어볼 겸 만들어보는중인데

데이터 자료들은 서버를 만들진못해서 json으로 깃허브에 올려서 사용중입니다.

깃허브에 올려둔 json을 axios로 받아와서 state에 넣어서 사용하려는데 에러가나서 질문합니다..ㅠ

코드는 현재 
사진처럼 작성했는데요 에러가나는게 저렇게 작성했을 땐 에러가안나는데
SwiperSlide 태그 안에 img에 puzzledata[0].img를 [1], [2], 로 변경하면 그때 에러가납니다.

아마 위에 puzzledata 이름으로 만든 state에 임시로 만든 배열객체를 늘려주면 에러가 고쳐질거같긴한데 좋은방법인지 잘 모르겠습니다.. 보통 이럴땐 어떻게 코드를 수정하나요?

에러가 나는이유가 useEffect로 데이터를 변경해주기전에 html을 구성해버려서 에러가 발생하는것같은데 맞나요?

해결방안을 알려주시면 감사하겠습니다!.. 상단에 import는 다 해왔습니다.

강병진 · Answer

상태(state)가 잘 바뀐다면 렌더링이 다시 될거라서 상태를 먼저 바꿔서 발생하는 문제는 아닐 것 같습니다

1. 개발자도구에서 에러 메세지가 있는지 확인하시고
2. console.log()를 활용해서 서버에서 데이터가 잘 오는지 확인이 필요하고
3. 데이터가 잘 넘어온다면 상태가 잘 바뀌는지 확인이 필요합니다.

그리고 스크린샷에는 puzzel.json 이라는 오타가 있는데 혹시 오타가 문제는 아닐까요?

김석현 · Answer

안녕하세요. 질문자님께서 puzzledata에 초기값으로 1개의 아이템만을 할당하셨기 때문에 최초 컴포넌트 렌더링 시에는 puzzledata[0]에만 값이 존재하며, puzzledata[1], puzzledata[2]에는 값이 존재하지 않으므로 Uncaught TypeError: Cannot read properties of undefined (reading src)라는 에러가 발생했을 것입니다. 따라서 해당 에러를 방지하기 위해서는

위 부분을 {puzzledata.map(item =>

)} 와 같이 변경하시면 되겠습니다. 변경한 코드는 아래와 같이 동작합니다. 1. 최초 컴포넌트 렌더링 1-1) puzzledata = [{...}] 1-2) {puzzledata.map(item =>

)}에서 총 1개의 SwiperSlide만 렌더링 2. setPuzzledata 호출 시 컴포넌트 리렌더링 2-1) puzzledata = [{...}, {...}, {...}] 2-2) {puzzledata.map(item =>

)}에서 총 3개의 SwiperSlide가 렌더링 아래 gist 링크는 제가 테스트해 본 코드인데요, 궁금하시면 한 번 참고해보세요! https://gist.github.com/sekhyuni/1e8ab8d656da777310b55bf46a82d58a