해결된 질문
23.01.14 10:42 작성
·
10K
0
import axios from '../../api/axios';
import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
export default function DetailPage() {
const { movieId } = useParams();
const [movie, setMovie] = useState({});
useEffect(() => {
async function fetchData() {
const request = await axios.get(`/movie/${movieId}`);
// setMovie(request.data);
console.log(request);
}
fetchData();
}, [movieId])
// if (!movie) return null;
console.log(movie);
return (
<section>
<img
className='modal__poster-img'
src={`https://image.tmdb.org/t/p/original/${movie.backdrop_path}`}
alt="modal__poster-img"
/>
</section>
)
}
안녕하세요, 위와 같이 디테일페이지 코드를 영상을 보면서 하고 있는데.. 콘솔에서 리퀘스트를 불러올 때 에러가 뜹니다.
Uncaught (in promise) AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
디테일 페이지에서만 위와 같은 에러가 왜 뜨는 건지 모르겠어서 문의글 남깁니다 ㅠㅠ
답변 2
1
2023. 01. 14. 15:07
안녕하세요 !!
BAD REQUEST라고 나오는데
여기에서 Request URL 이 어떻게 나오는지 볼 수 있나요?
요청이 잘못되었을 거예요 ~
0
2023. 01. 16. 19:39
멍청한 실수를 제가 했네요ㅠㅠ
<Route path=':movieId' element={ <DetailPage /> }></Route>
const { movieId } = useParams();
const [movie, setMovie] = useState({});
useEffect(() => {
async function fetchData() {
const request = await axios.get(`/movie/${movieId}`);
setMovie(request.data);
// console.log(request);
}
fetchData();
}, [movieId])
App.js에서 movieId 부분을 잘못 써서 이와 같은 현상이 나왔었네요ㅠㅠ
2023. 01. 14. 16:19
api 파일 입니다 !