ajax .then() 질문

[이치호]

let [shoes, shoes변경] = useState(Data);

 

<div>
<button className="btn btn-primary" onClick={()=>{
axios.get('https://codingapple1.github.io/shop/data2.json')
.then((result)=>{
shoes변경([...shoes, ...result.data]);
})
.catch(()=>{
alert('실패')
})
}}>더보기!</button>
</div>

 

제가 따라친 코드입니다.

GET요청이 성공한 거 같은데 렌더링이 안 됩니다

무슨일인 걸까요?

 

[이치호]

(3) [{…}, {…}, {…}]
0: {id: 3, title: "Flowey", content: "only 5 inches", price: 120000}
1: {id: 4, title: "Baby shoes", content: "for less than 6", price: 120000}
2: {id: 5, title: "Red Herring", content: "Born in France", price: 120000}
length: 3
 

console.log(result.data)는 이렇게 뜹니다!

[codingapple]

shoes라는 state 출력해봐서 상품이 6개 들어있는지 확인하고

잘 들어있으면 반복문으로 상품들을 보여주는 코드도 반복문 6회 잘 돌리는지 확인합시다 

[이치호]

shoes변경([...shoes, ...result.data]) 뒤에

console.log(shoes)를 쓰면

(3) [{…}, {…}, {…}]
0: {id: 0, title: "White and Black", content: "Born in France", price: 120000}
1: {id: 1, title: "Red Knit", content: "Born in Seoul", price: 110000}
2: {id: 2, title: "Grey Yordan", content: "Born in the States", price: 130000}
length: 3
 

이렇게 나오네요. ...result.data가 추가가 안 되는 거 같은데 어떡해야 할까요?

 

반복문은 

{
Data.map((a,i)=>{
return <Item shoes={shoes[i]} i={i}/>
})
}

로 어레이 추가 시 갯수로 동작하는 거라 이상은 없어 보입니다..

[이치호]

새로운 데이터를 data.js 에 포함시키고

 

<button className="btn btn-primary" onClick={()=>{
axios.get('https://codingapple1.github.io/shop/data2.json')
.then((result)=>{
var newProduct =[...shoes];
shoes변경(newProduct)
})
.catch(()=>{
alert('실패')
})
}}>더보기!</button>

 

이 함수를 썼더니 onClick 이벤트 전에 이미 목록이 전부 바뀌어있습니다

뭔가 근본적으로 잘못된 거 같은데 문제점 보이시면 말씀해주세요!

[codingapple]

}}>더보기!</button>

여기에 } 닫는 괄호가 1개 만 있어야 할듯요? 

[codingapple]

는 아니네요 전체 코드를 올려주십시오

[글쓴이]

글