inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

[그랩마켓] React로 웹 개발하기 - 2

TypeError: Cannot read properties of undefined (reading 'map')

해결된 질문

518

o2cornholdings

작성한 질문수 4

0

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">
(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);
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 express tensorflow nodejs 머신러닝 배워볼래요? javascript HTML/CSS

답변 1

0

그랩

현재 axios.get을 하는 부분에 axios의 js 코드가 담긴 url로 요청을 하고 있는데, 수업에서 알려준대로 postman 주소를 넣어보시면 어떨까요?

0

o2cornholdings

아 네. postman 과정을 건너뛰었는데요. 바로 이런 문제가 나오네요. 작업후 다시 답변달겠습니다. 감사합니다. ^^

[해결]그랩님 답변 주세요.

0

160

2

그랩님의 답변을 기다립니다/102강 전반적인 에러

0

141

2

[그랩님께]101강 안드로이드 에러들(Key prop)해결방법 궁금합니다.

0

123

2

[재질문][그랩님 답변 부탁드립니다]101강

0

140

2

[그랩님 답변 부탁드립니다]101강 Axios 에러와 502 Bad Gateway 질문

0

96

2

Ngrok 설치 후 forwarding Url 에러

0

133

2

[그랩님께,Ngrok 악성코드 인식 해결방법]질문 드립니다.

0

217

2

Ngrok 설치 후 forwarding Url로 연결 불가

0

134

1

그랩님,[꼭] 답변 부탁드립니다.

0

65

1

[꼭][[꼭] 그랩님, 답변 부탁드립니다], Failed to load resource: the server responded with a status of 404 (Not Found) 상품 상세 페이지 질문입니다.

0

149

1

6강/7강 수업

0

50

1

그랩님, 상품 상세 페이지 에러와 의문점 질문드립니다.

0

98

2

그랩님, 해결되지 않은 에러 메시지 [꼭] 답변 부탁 드립니다.

0

134

2

[재 질문]Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?

0

88

1

Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?

0

127

2

일반적인 css 꾸미기에서 width와 height의 값?

0

90

2

Windows에서의 업로드 후 홈화면 상품이미지 오류 해결방법

0

193

1

그랩마켓 웹화면 구현하기 -2 질문입니다.

0

119

1

react에 반영이 되지 않습니다.

0

236

1

터미널 npm install -g create-react-app 작성 후 오류

0

419

1

create-react-app my app 실행 시 에러

0

354

2

포스트맨 질문

0

99

1

<꼭 답변 부탁 드립니다>그랩선생님, [컴포넌트 사용하기] 강의에서 질문 있습니다.

0

260

2

그랩선생님, 질문 답변 부탁 드립니다.vscode에서 npm install -g create-react-app 입력 후 에러 입니다.

0

473

2