• 카테고리

    질문 & 답변

  • 세부 분야

    풀스택

  • 해결 여부

    미해결

Product undefined 오류 왜 나는지 모르겠습니다

21.02.07 21:25 작성 조회수 139

0

안녕하세요 선생님 강의 너무 잘 듣고 있습니다.

LandingPage에서 카드 UI만드는 과정 듣고 있는데

Product is not defined 라는 오류가 뜨는데 왜 나오는지 모르겠습니다.

아래에는 오류 메세지와 LandingPage 작성 코드 입니다.

[nodemon] restarting due to changes...

[1] Compiling...

[0] [nodemon] starting `node server/index.js`

[1] Failed to compile.

[1]

[1] ./src/components/views/LandingPage/LandingPage.js

[1]   Line 26:25:  'Products' is not defined  no-undef

[1]

[1] Search for the keywords to learn more about each error.

[0] (node:7828) Warning: Accessing non-existent property 'count' of module exports inside circular dependency

[0] (Use `node --trace-warnings ...` to show where the warning was created)

[0] (node:7828) Warning: Accessing non-existent property 'findOne' of module exports inside circular dependency

[0] (node:7828) Warning: Accessing non-existent property 'remove' of module exports inside circular dependency

[0] Server Listening on 5000

[0] (node:7828) Warning: Accessing non-existent property 'updateOne' of module exports inside circular dependency

[0] MongooseError [MongooseServerSelectionError]: connection <monitor> to 52.220.203.202:27017 closed

[0]     at new MongooseServerSelectionError (C:\Users\ADMIN\Desktop\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\mongoose\lib\error\serverSelection.js:22:11)

[0]     at NativeConnection.Connection.openUri (C:\Users\ADMIN\Desktop\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\mongoose\lib\connection.js:823:32)

[0]     at Mongoose.connect (C:\Users\ADMIN\Desktop\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\mongoose\lib\index.js:333:15)

[0]     at Object.<anonymous> (C:\Users\ADMIN\Desktop\boilerplate-mern-stack-master\boilerplate-mern-stack-master\server\index.js:19:26)

[0]     at Module._compile (internal/modules/cjs/loader.js:1063:30)

[0]     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)

[0]     at Module.load (internal/modules/cjs/loader.js:928:32)

[0]     at Function.Module._load (internal/modules/cjs/loader.js:769:14)

[0]     at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)

[0]     at internal/main/run_main_module.js:17:47 {

[0]   reason: TopologyDescription {

[0]     type: 'ReplicaSetNoPrimary',

[0]     setName: null,

[0]     maxSetVersion: null,

[0]     maxElectionId: null,

[0]     servers: Map(3) {

[0]       'shop-shard-00-02.0vwa9.mongodb.net:27017' => [ServerDescription],

[0]       'shop-shard-00-01.0vwa9.mongodb.net:27017' => [ServerDescription],

[0]       'shop-shard-00-00.0vwa9.mongodb.net:27017' => [ServerDescription]

[0]     },

[0]     stale: false,

[0]     compatible: true,

============================================================================================

import React, {useEffect, useState} from 'react'
import { FaCode } from "react-icons/fa";
import axios from "axios";
import {Icon, Col, Card, Row} from 'antd';
import { Product } from '../../../../../server/models/Product';
import Meta from 'antd/lib/card/Meta';

function LandingPage() {
    
    const [Proucts, setProducts] = useState ([])

    useEffect(() => {
       
        

        axios.post('/api/product/products')
            .then(response => {
                if(response.data.success) {
                    setProducts(response.data.productInfo)
                } else {
                    alert("상품들을 가져오는데 실패 했습니다.")
                }
            })
    }, [])
    
    const renderCards = Products.map((product, index)=> {

        return <Col lg={6} md={8} xs={24} key={index}> 
        
        <Card
            
            cover={<img src={`http://localhost:5000/${product.image[0]}`} />}
        >
            <Meta
                title={product.title}
                description={`$${product.price}`}
            />           
        </Card>
        </Col>
    })
    
    
    return (
       <div style={{ width: '75%', margin: '3rem auto'}}>

           <div style={{ textAlign: 'center'}}>
        <h2>Let's Travel Anywhere <Icon type="rocket" /></h2>
           </div>
           
           {/* Filter */}

            {/* Search */}

            {/* Cards */}

            <Row gutter>
            {renderCards}
            </Row>
            

        

        <div style={{ justifyContent: 'center'}}>
            <button>더보기</button>

        </div>



       </div>
    )
}

export default LandingPage

[0]     compatibilityError: null,

[0]     logicalSessionTimeoutMinutes: null,

[0]     heartbeatFrequencyMS: 10000,

[0]     localThresholdMS: 15,

[0]     commonWireVersion: null

[0]   },

[0]   [Symbol(mongoErrorContextSymbol)]: {}

[0] }

course-thumbnail

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

답변 1

답변을 작성해보세요.

0

John Ahn님의 프로필

John Ahn

지식공유자

2021.02.09

notbackdown님 안녕하세요 ~~~ 보시면 스펠링에 오타가 있습니다 ~~~ 스펠링 체크해주시면 됩니다 ~ 
근데 몽고DB 연결도 안된것 같은데요?!   그 두부분 체크해주셔야 할 것 같습니다 ! 

이 글과 비슷한 Q&A