TypeError: Cannot read properties of... - 인프런

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;
 

인프런 커뮤니티 질문&답변

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