자료 고유 id와 url 파라미터 연결하기 관련 질문

[Gyeong a Kim]

function Detail(props){
 let { id } = useParams();
 let 찾은상품 = props.shoes.find(function(x){ return x.id == id });

 return (
<div className="container">
  <h4 className="pt-5">{찾은상품.title}</h4>
  <p>{찾은상품.content}</p>
  <p>{찾은상품.price}원</p> 
 </div>
) };

export default Detail 


위와 같이 진행했을 때 화면에 출력이 되지 않아
console.log(찾은상품)으로 입력해보니
undefinded로 출력이 되는 것을 확인했습니다.
(결과 값이 없어서 화면이 출력이 안 되는 것 같다고 느끼고 있습니다 ㅠㅠ)


이후에 리덕스 파트 과제에도 비슷한 부분이 있어 다시 해결해보려고 하는데
혹시 위와 같이 undefined로 나오는 것이 맞게 출력 되는 부분일까요?

[codingapple]

object같은게 남아야할걸요 props.shoes도 잘 있나 출력해봅시다

[Gyeong a Kim]

가나다순으로 배열 정돈 후 (id가 2인 상품이 0번째가 됨)

let 찾은상품 = props.shoes.find((item) => item.id === id);
  console.log(id);
  console.log(props.shoes);
  console.log(찾은상품);

로 확인해보면
0 //현재 위치의 id(파라미터)
(3) [{…}, {…}, {…}] //data.js에 담긴 3개의 신발 정보
undefined 

로 뜹니다.
제가 직접 수동으로
let 찾은상품 = props.shoes.find((item) => item.id === 0)
let 찾은상품 = props.shoes.find((item) => item.id === 2)

와 같이 파라미터 값을 바꾸면 (스위치를 수동으로 조작하면)
{id: 0, title: 'White and Black', content: 'Born in France', price: 120000}
{id: 2, title: 'Grey Yordan', content: 'Born in the States', price: 130000}

로 잘 작동되는 것을 확인했습니다.

=========================

해결했습니다!!!!
console.log(id) 값이 0으로 숫자처럼 보이는 듯 했으나
출력되는 값이 문자임을 확인했고,
(console.log(typeof id) //string)

id값에 parseInt를 주는 것으로 해결했습니다!!
let 찾은상품 = props.shoes.find((item) => item.id === parseInt(id));

감사합니다!!!!!!!
타입스크립트가 자바스크립트로 인해 발생되는 에러를 방지하기 위해 만들어졌다고 알고 있는데,
금번 프로젝트에 <React.StrictMode>를 통해 미리 경험하는 것 같습니다.
이후에 타입스크립트도 꼭 배워보고 싶다는 생각이 많이 들었습니다 :)

앞으로도 잘 부탁드립니다!

[블루]

와 대박;;; 저도 진짜 같은문제로 3시간 고민하다가 이거찾고 해결;;

유저 URL 파라미터가 string으로 오는군요;;

님 좀 천재인듯..

[Gyeong a Kim]

도움 되셨다니 정말 다행입니다!!! :D
오류 해결할 때 짜릿함이란 !!

[박소진]

ㅜㅜ저도 같은데서 막혔는데 감사합니다!!

[글쓴이]

글