map undefined 오류 질문드립니다

Question

코드를 혼자 짜보려고 하는 중에 type error:cannot read property 'map' of undefined가 뜹니다. 서버쪽은 postman연동했을때 잘 뜨는데 논리 하자가 있는 것 같습니다..ㅠㅠ뭐가 문제일까요 main/index.js import " ./index.css "; import axios from " axios "; import React from " react "; import { API_URL } from " ../config/config.js "; function MainPage () { const [ products , setProducts ] = React . useState ([]) ; React . useEffect ( function () { axios . get ( `${ API_URL } /products ` ) . then ( function ( result ) { console . log ( " RESULT값: " , result ) ; const products = result . data . products ; setProducts ( products ) ; } ) . catch ( function ( error ) { console . log ( " error발생 " ) ; } ) ; }, []) ; return ( < div > < div id = " banner " > < img src = " images/banners/banner1.png " /> < h1 > 판매되는 상품들 < div id = " product-list " > { products . map ( function ( product , index ) { return ( < div className = " product-card " > < div > < div className = " product-contents " > < span className = " product-name " >{ product . name } < span className = " product-price " >{ product . price } 원 < div classNmae = " product-footer " > < div className = " product-seller " > < img className = " product-avatar " src = " images/icons/avatar.png " /> < span >{ product . seller } ) ; } ) } ) ; } ####App.js export default MainPage ; import " ./App.css "; import MainPageComponent from " ./main "; function App () { return < MainPageComponent /> ; } export default App ; ##server const express = require ( " express " ) ; const cors = require ( " cors " ) ; const app = express () ; const port = 7070 ; const models = require ( " ./models " ) ; app . use ( express . json ()) ; app . use ( cors ()) ; app . get ( " /products " , ( req , res ) => { models . Product . findAll ( { attributes : [ " id " , " name " , " price " , " imageUrl " , " seller " , " createdAt " ] , } ) . then ( ( result ) => { console . log ( " RESULT값 : " , result ) ; res . send ( { product : result , } ) ; } ) . catch ( ( error ) => { console . error ( " ERROR가 발생하였습니다: " , error ) ; } ) ; } ) ; app . listen (port , () => { console . log ( " 그랩 마켓의 서버가 돌아가고 있습니다. " ) ; models . sequelize . sync () . then ( () => { console . log ( " ✓ DB 연결 성공 " ) ; } ) . catch ( function ( err ) { console . error ( err ) ; console . log ( " ✗ DB 연결 에러 " ) ; process . exit () ; } ) ; } ) ;

그랩 · Answer

서버에서는 response로 {product: ...}를 전달해주는데, client에서는 result.data. products 로 받네요ㅎㅎ 서버의 response코드에서 product를 products로 이름을 맞춰주시면 해결될 것 같아요! ㅎㅎ 초반에 변수명을 헷갈리는 게 지극히 정상이니 킵고잉 하시길 💪💪

그랩 · Answer

서버에서 찍히는 로그와 클라이언트(브라우저 -> 개발자도구 -> 콘솔 창) 로그를 올려주시면 빠르게 확인할 수 있을 것 같습니다~! 현재 문제는 클라이언트가 서버에게 제대로 데이터를 받아오지 못했을 때 생기는 이슈입니다! 서버 클라이언트 모두 console.log로 로그로 남겼으니 result에 제대로 값이 들어오는지 확인해보면 좋을 것 같아요. console . log ( " RESULT값 : " , result ) ;