더보기 ajax시 props 문제

[김민성]

원래는 남성용, 여성용 상품창을 따로 관리했는데 코드를 줄이고자 합치던 도중 발생한 문제입니다.

동그라미 친 부분이 수정된 부분입니다. 원래는 남자 데이터 map으로 뿌리는 UI

여자데이터 map으로 뿌리는 UI,  2개로 관리했습니다. 근데 코드가 너무 중복되서 하나로 합치려 했습니다.

 

    let [shoes, setShoes] = useState(props.shoes); // 상품의 데이터
    let [wshoes, setWShoes] = useState(props.shoes);
  기존의 props가 가지고 있는 shoes 데이터를 기본값으로 했습니다. 그러면 남자 상품이든 여자 상품이든 shoes에 저장됩니다.

 

axios에서 props.i로 기존의 데이터가 여자면 여자 데이터 json을 가져와서 합치고, 남자면 남자 데이터 json을 가져와서 합칩니다.

그렇게 shoes라는 State 변수에 저장하고 <ShoesItem>으로 UI를 만듭니다.

남자나 여자 카테고리에서 '더보기'까지 정상적으로 잘 출력됩니다. 근데 출력된 이후 다른 카테고리로 넘어갈 때,

Link는 이동을 잘 시킵니다.  하지만 상품들 렌더링이 일어나지 않습니다.

 

제가 Navbar를 통해 다시 남자 카테고리를 고르면 아래에서 <ShoesList>에 남자데이터를 가지고 있는 {shoes}가 전달되서 재 렌더링이 일어나야하는거 아닌가요? 왜 변화가 없는지 잘 모르겠습니다..

map으로 남자UI과 여자UI를 따로 만들면 작동은 합니다  

[김민성]

추가로 질문드립니다..ㅠㅠ 이전코드를 그대로 쓰면 추가 상품들은 정상적으로 나열됩니다. 

하지만 추가된 상품들을 클릭했을때 detail페이지로의 정보가 undefined입니다. 아마 최상단에서 Route 설정이 되어 있는데, 여기서 detail컴포넌트에 props로 전달되는 값은 상품 페이지에서 추가된 상품정보가 적용되지 않은 State가 전달되는 것 같습니다. 그래서 추가된 상품을 클릭하면 undefined가 전달이 되어 오류가 뜹니다. 

저처럼 추가된 상품들을 클릭했을때 detail 페이지에 변경된 데이터 State를 어떻게 전달해야되나요...? 

아니면 상품 나열 페이지에서 아래의 경로를 다시 써줄 수가 있나요?

                <Route path="/manshoes/:id">
                    <About shoes={shoes}></About>
                </Route>
                <Route path="/womanshoes/:id">
                    <About shoes={wshoes}></About>
               </Route>

 

about이 detail입니다.

[김민성]

마지막 영상에 부모 state 변경 내용이 들어가있었군요ㅠㅠㅠㅠ 

뭐할려하지말고 일단은 따라하면서 쭉 듣겠습니다...ㅋㅋㅋ

[codingapple]

자식이 부모 state 변경하고싶으면

부모가 자식에게 state 변경함수를 props로 전해주면 됩니다 

[글쓴이]

글