axios로 불러온 값을 배열 push 질문

[김건]

<button className ="btn btn-primary" onClick={()=>{

              axios.get('https://codingapple1.github.io/shop/data2.json')
              .then((result)=>{
                console.log(result.data);
                // shoes변경([...shoes, ...result.data]); // shoes 카피본!!
                let copy = [...shoes];
                copy.push(result.data);
                shoes변경(copy);

              }) //요청이 성공했을 때

              .catch(()=>{
                console.log('실패ㅜㅜ')
              }) //요청이 실패했을 때       
              
            }}>더보기</button>

 

shoes변경([...shoes, ...result.data]); // shoes  

일단 이건 잘됩니다..

그런데 예전에 배웠던 식으로 카피해서 push 방법이 잘 안됩니다.

발생한 문제가 '더보기'를 눌렀을때 이미지를 3, 4, 5 하나씩 가져오고 

title, price 같은건 못가져오더라구요. 개발자도구로 보니 이미지만 가져오게 되있는데 왜 인지 모르겠습니다.

 

[codingapple]

저 url로 요청하시면 title, price 잘 포함된 array를 가져올텐데 

못가져온다는 것은 혹시 title, price 사용할 때 데이터바인딩이 잘못된 것이 아닐까요 

[김건]

let copy = […shoes];
                copy.push(result.data);
                shoes변경(copy); 

 

이렇게 짰었는데 뭐가 틀린걸까요?

 

price 값도 안나오지만 이미지도 한번에 3개가 뜨는게 아니라 하나씩 뜹니다.

[codingapple]

가져온 데이터는 [{},{},{}] 이렇게 생겼고

shoes라는 state도 [{},{},{}] 이렇게 생겼습니다 그래서 두개 합치시려면 push를 쓰면 안되고 

let copy = [ ...shoes, ...result.data ] 이렇게 쓰면 될듯요?

[글쓴이]

글