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

작성자 없음

작성자 정보가 삭제된 글입니다.

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

map undefined 오류 질문드립니다

작성

522

코드를 혼자 짜보려고 하는 중에 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" />
      </div>
      <h1>판매되는 상품들</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>
                  <span className="product-price">{product.price}원</span>
                  <div classNmae="product-footer">
                    <div className="product-seller">
                      <img
                        className="product-avatar"
                        src="images/icons/avatar.png"
                      />
                      <span>{product.seller}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}
####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();
    });
});