react state 상태변경안됨 도와주세요 !

Question

react공부중입니다.let data = [ { id: 0, title: 'White and Black', content: 'Born in France', price: 120000, }, { id: 1, title: 'Red Knit', content: 'Born in Seoul', price: 110000, }, { id: 2, title: 'Grey Yordan', content: 'Born in the States', price: 130000, },];이러한 데이터셋이 있습니다.app.js에서 이 데이터셋을 끌어왔습니다.그 후 let [shoes, setShoes] = useState(data);로 스테이트로 만들어줬고Route로 /로 갈시 파일을 렌더링하게 합니다.(HomeRoute는 ./routes/HomeRoutes.js 입니다)그리고 HomeRoute에게 방금 state로 만들어준 shoes를 props로 넘겨줍니다.shoes를 props로 받은 HomeRoute는 shoes를 div로 감싸서 shoes만큼 map으로 돌려줍니다.대충 이런 코드입니다.

{shoes.map((a, i) => { return ; })}

이 때 ShoesCard는 shoes를 받아서 id나 title 등등을 화면에 뿌려줍니다.ui결과는 이렇게 됐습니다.여기서, app.js에서 데이터를 추가해서 저 신발들을 늘리고 싶습니다.그래서 app.js에 button을 만들어 shoes에 데이터를 추가하는 기능을 만들었습니다.그런데 shoes에 데이터는 잘 추가가 되는데, ui가 안변합니다.콘솔로그로도 shoes의 데이터는 3개가 아닌 4개가 됐는데 이유를 잘 모르겠습니다.혹시 모르니 app.js의 shoes에 데이터 추가하는 코드도 남겨놓겠습니다. 도와주시면 감사하겠습니다...몇 시간째 끙끙 앓고있습니다.

Bluebell · Answer

{shoes.map((shoe, i) => {return ;})}

형식으로 고쳐보세요

imgood · Answer

setShoes((shoes)=> [...shoes,{id: 5,title: 'Red Knit5',content: 'Born in Seou5l',price: 110050,}]);

react state 상태변경안됨 도와주세요 !

2개의 답변

#usestate 목록