-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
AxiosError 도와주세요...
23.01.14 10:42 작성 조회수 8.09k
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, …}
디테일 페이지에서만 위와 같은 에러가 왜 뜨는 건지 모르겠어서 문의글 남깁니다 ㅠㅠ
답변을 작성해보세요.
1
John Ahn
지식공유자2023.01.14
안녕하세요 !!
BAD REQUEST라고 나오는데 
여기에서 Request URL 이 어떻게 나오는지 볼 수 있나요?
요청이 잘못되었을 거예요 ~
이은혜
질문자2023.01.14
import axios from "axios";
const instance = axios.create({
baseURL: 'https://api.themoviedb.org/3',
params: {
api_key: "***",
language: "ko-KR",
}
})
export default instance;
api 파일 입니다 !
0
이은혜
질문자2023.01.16
멍청한 실수를 제가 했네요ㅠㅠ
<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 부분을 잘못 써서 이와 같은 현상이 나왔었네요ㅠㅠ
답변 2