AxiosError 도와주세요...

따라하며 배우는 리액트 A-Z[19버전 반영]

useParams를 이용한 영화 상세 페이지 구현하기

해결된 질문

작성

11K

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, …}

디테일 페이지에서만 위와 같은 에러가 왜 뜨는 건지 모르겠어서 문의글 남깁니다 ㅠㅠ

typescript redux tdd react Next.js

답변 2

John Ahn

지식공유자

안녕하세요 !!
BAD REQUEST라고 나오는데
여기에서 Request URL 이 어떻게 나오는지 볼 수 있나요?

요청이 잘못되었을 거예요 ~

이은혜

질문자

import axios from "axios";

const instance = axios.create({
  baseURL: 'https://api.themoviedb.org/3',
  params: {
    api_key: "***",
    language: "ko-KR",
  }
})

export default instance;

api 파일 입니다 !

이은혜

질문자

멍청한 실수를 제가 했네요ㅠㅠ

<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 부분을 잘못 써서 이와 같은 현상이 나왔었네요ㅠㅠ

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

AxiosError 도와주세요...