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

스위스웨덴마크레용님의 프로필 이미지
스위스웨덴마크레용

작성한 질문수

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

상품의 상세정보를 데이터베이스에서 가져오기에서...서버로 요청보는거..

작성

·

353

0

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

 

DetailProductPage.js에서

import React, { useEffect } from 'react'
import axios from 'axios'

function DetailProductPage(props) {

    const productId = props.match.params.productId

    console.log(productId)
   
    useEffect(() => {

        axios.get(`/api/product/products_by_id?id=${productId}&type=single`)
        .then(response => {
            if(response.data.success){
                console.log('response.data', response.data)
            }else{
                alert('상세 정보 가져오기를 실패했습니다.')
            }
        })
    },[])


    return (
        <div style={{fontSize: "100px"}}>
            DetailProductPage
        </div>
    )
}

export default DetailProductPage
 
 

 

서버에서는


router.get('/products_by_id', (req, res) => {

  let type = req.query.type
  let productId = req.query.id
  //productId를 이용해서 DB에서 productId와 같은 상품의 정보를 가져온다.

  Product.find({ _id: productId })
  .populate('wirter')
  .exec((err, product) => {
    if(err) return res.status(400).send(err)
    return res.status(200).send({ success: true, product })
  })

})
 
 

이렇게 했는데

 

콘솔 창에 자꾸

xhr.js:178 GET http://localhost:3000/api/product/products_by_id?id=61a724c07a509357ff088d79&type=single 400 (Bad Request) dispatchXhrRequest @ xhr.js:178 xhrAdapter @ xhr.js:12 dispatchRequest @ dispatchRequest.js:52 Promise.then(비동기) request @ Axios.js:61 Axios.<computed> @ Axios.js:76 wrap @ bind.js:9 (익명) @ DetailProductPage.js:12 commitHookEffectList @ react-dom.development.js:22030 commitPassiveHookEffects @ react-dom.development.js:22064 callCallback @ react-dom.development.js:336 invokeGuardedCallbackDev @ react-dom.development.js:385 invokeGuardedCallback @ react-dom.development.js:440 flushPassiveEffectsImpl @ react-dom.development.js:25392 unstable_runWithPriority @ scheduler.development.js:697 runWithPriority$2 @ react-dom.development.js:12149 flushPassiveEffects @ react-dom.development.js:25361 performSyncWorkOnRoot @ react-dom.development.js:24251 (익명) @ react-dom.development.js:12199 unstable_runWithPriority @ scheduler.development.js:697 runWithPriority$2 @ react-dom.development.js:12149 flushSyncCallbackQueueImpl @ react-dom.development.js:12194 flushSyncCallbackQueue @ react-dom.development.js:12182 unbatchedUpdates @ react-dom.development.js:24439 legacyRenderSubtreeIntoContainer @ react-dom.development.js:27527 render @ react-dom.development.js:27608 ./src/index.js @ index.js:50 __webpack_require__ @ bootstrap:785 fn @ bootstrap:150 1 @ serviceWorker.js:137 __webpack_require__ @ bootstrap:785 checkDeferredModules @ bootstrap:45 webpackJsonpCallback @ bootstrap:32 (익명) @ main.chunk.js:1 createError.js:16 Uncaught (in promise) Error: Request failed with status code 400 at createError (createError.js:16) at settle (settle.js:17) at XMLHttpRequest.handleLoad (xhr.js:61)

 

 

이렇게 오류가 뜨면서 서버로 보낸 요청 자체가 잘못되었다고 하는데....아무리 구글링해도 안나오고..미치겠네요ㅠㅠㅠ

답변 2

0

같은 에러가 뜨는데 어떻게 해결하셨나요?

 

0

John Ahn님의 프로필 이미지
John Ahn
지식공유자

안녕하세요 ! 
보여주신것만으로는 문제를 못찾겠어서요 ! 
새로운글에 깃허브 소스코드와 함께 올려주실수있을까요? 
직접해보겟습니다 !!

스위스웨덴마크레용님의 프로필 이미지
스위스웨덴마크레용

작성한 질문수

질문하기