- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 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)
이렇게 오류가 뜨면서 서버로 보낸 요청 자체가 잘못되었다고 하는데....아무리 구글링해도 안나오고..미치겠네요ㅠㅠㅠ