TypeError: Cannot read properties of undefined (reading 'map')
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
React로 웹 개발하기 - 2 수강후 에러 메시지 문의입니다. npm start 하여 로컬호스트 화면에 아래의 메시지가 나오는데 해결이 안됩니다. 어디에 문제가 있는건지 문의드립니다. × TypeError: Cannot read properties of undefined (reading 'map') MainPage C:/Users/hanthene/Documents/github/grab-market-web/src/main/index.js:33 30 | < img src = "images/banners/banner1.png" / > 31 | < / div > 32 | < h1 > 판매되는 상품들 < / h1 > > 33 | < div id = "product-list" > | ^ 34 | {products . map( function (product , index) { 35 | return ( 36 | < div className = "product-card" > View compiled ▶ 18 stack frames were collapsed. (anonymous function) C:/Users/hanthene/Documents/github/grab-market-web/src/main/index.js:15 12 | . then( function (result){ 13 | console . log(result) ; 14 | const products = result . data . products ; > 15 | setProducts(products) ; | ^ 16 | }) 17 | . catch ( function (error){ 18 | console . error( '에러 발생 : ' , error) ; View compiled This screen is visible only in development. It will not appear if the app crashes in production. Open your browser’s developer console to further inspect this error. 에러가 나는 상태의 파일 그대로 GITHUB에 퍼블릭으로 올려놓았습니다. https://github.com/ucoder-git/grab-market-client 아래는 package.json 입니다. { "name" : "grab-market-web" , "version" : "0.1.0" , "private" : true , "dependencies" : { "@testing-library/jest-dom" : "^5.16.3" , "@testing-library/react" : "^12.1.4" , "@testing-library/user-event" : "^13.5.0" , "axios" : "^0.26.1" , "react" : "^17.0.2" , "react-dom" : "^17.0.2" , "react-scripts" : "^2.1.3" , "web-vitals" : "^2.1.4" }, 아래는 src폴더의 index.js 파일입니다. import React from 'react' ; import './index.css' ; import axios from "axios" ; function MainPage () { const [ products , setProducts ]= React . useState ([]); React . useEffect ( function () { axios . get ( "https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js" ) . then ( function ( result ){ console . log ( 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 > </ div > < div id = "body" > < div id = "banner" > < img src = "images/banners/banner1.png" /> </ div > < h1 > 판매되는 상품들 </ h1 > < div id = "product-list" > { products . map ( function ( product , index ) { return ( < div className = "product-card" > < div > < img className = "product-img" src = { product . imageUrl } /> </ div > < div className = "product-contents" > < span className = "product-name" > { product . name } </ span > < span className = "product-price" > { product . price } 원 </ span > < div className = "product-seller" > < img className = "product-avatar" src = "images/icons/avatar.png" /> < span > { product . seller } </ span > </ div > </ div > </ div > ); }) } </ div > </ div > < div id = "footer" ></ div > </ div > ); } export default MainPage ;
- jsx
- react
- react-native
- react
- express
- tensorflow
- nodejs
- 머신러닝 배워볼래요?
- javascript
- HTML/CSS