localhost:3000/products/undefined

Question

안녕하세요 그랩님 수업을 듣다가 막히는 부분이 생겨서 질문 남깁니다. postman에서 products/1을 추가한 후에 Link부분을 ${index}에서 ${product.id}로 변경을 했더니 이렇게 undefined라고 나옵니다 코드와 postman을 다 검토해봤는데 뭐가 틀린건지 잘 모르겠습니다ㅠ 확인 한번만 부탁드립니다. 항상 감사합니다. (postman에서 products 아래에 원래 products와 default 가 같이 있었는데 제가 하나만 남기고 싶어서 default를 삭제하고 products만 남겨뒀습니다. 혹시 그게 문제가 된거일 수도 있을까요?) < div id = " product-list " > { products . map ( function ( product , index ) { return ( < div className = " product-card " > < Link className = " product-link " to ={ ` /products/ ${ product . id }` } > < div >

이한성 · Answer

답변 감사합니다 그랩님! 이것저것 해보다가 해결을 하긴 했는데.. 이게 맞는방법인건지를 모르겠습니다 postman URL주소 제일 마지막에 / 를 넣었더니 해결이 됐습니다. ( 원래 코드에는 "https://xxxxxxxxx.mock.pstmn.io/products"로 기재를 했었는데 "https://xxxxxxxxx.mock.pstmn.io/products / "로 바꿨더니 수정 되었습니다.) 이렇게 해도 되는건가요..? 확인 한번만 부탁드립니다. 감사합니다!

그랩 · Answer

코드 윗쪽에 useEffect 안에 setProducts(products) 코드가 있을거에요. 그 위에 console.log(products)를 통해 products 값이 어떻게 들어오는지 먼저 확인해주시겠어요?

그랩 · Answer

const products = result.data.products console.log("PRODUCTS : ", products) setProducts(products) 요렇게 코드를 추가하시고 브라우저 개발자도구에서 로그를 확인해보시면 좋을 것 같아요. 지금 의심가는 부분은 products 변수에 데이터가 제대로 들어가 있지 않기에 setProducts를 통해 products라는 state에 값이 없고, 이에 products.map 이 부분이 제대로 동작하지 않는 것으로 보입니다.

이한성 · Answer

안녕하세요 그랩님 useEffect안에 setProducts(products)코드는 찾았는데 그 다음 말씀해주신걸 어떻게 해야하는건지를 모르겠습니다ㅠㅠ 수업을 열심히 듣고있다고 생각했는데 아직 갈길이 먼듯하네요ㅠ 제가 어떻게 해야하는건지 설명해주실 수 있을까요ㅠㅠ? (혹시 필요할지몰라 코드 전부다 올려봅니다ㅠㅠ) 감사합니다ㅠㅠ import " ./index.css "; import axios from " axios "; import React from " react "; import { Link } from " react-router-dom "; function MainPage () { const [ products , setProducts ] = React . useState ([]) ; React . useEffect ( function () { axios . get ( " https://2f7bb40d-0885-4845-a2a9-85871c1cc2b0.mock.pstmn.io/products " ) . then ( function ( result ) { const products = result . data . products ; setProducts ( products ) ; } ) . catch ( function ( error ) { console . error ( " 에러 발생 : " , error ) ; } ) ; }, []) ; return ( < div > < div id = " header " > < div id = " header-area " > < img src = " images/icons/logo.png " /> < div id = " body " > < div id = " banner " > < img src = " images/banners/banner1.png " /> < h1 > 판매되는 상품들 < div id = " product-list " > { products . map ( function ( product , index ) { return ( < div className = " product-card " > < Link className = " product-link " to ={ ` /products/ ${ product . id }` } > < div > < img className = " product-image " src ={ product . imageUrl } /> < div className = " product-contents " > < span className = " product-name " >{ product . name } < span className = " product-price " >{ product . price } 원 < div className = " product-seller " > < img className = " product-avatar " src = " images/icons/avatar.png " /> < span >{ product . seller } ) ; } ) } < div id = " footer " > ) ; } export default MainPage ;