• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

GET https://image.tmdb.org/t/p/original/undefined 404에러

22.08.11 21:28 작성 조회수 538

1

실행 자체는 잘 되고 이미지도 잘 불러와지는데 콘솔을 보면 GET https://image.tmdb.org/t/p/original/undefined 에러가 뜹니다. 한번씩 GET https://image.tmdb.org/t/p/original/null 도 같이 나오고요.

왜 발생하는지 모르겠어요. 무시해도 되는 걸까요?

Row.js입니다

import React, { useEffect, useState } from 'react'
import axios from "../api/axios";
import "./Row.css";

function Row({title, fetchUrl, id, isLargeRow}) {
  const [movies, setMovies] = useState([]);

  const fetchMovieData = async() => {
    const request = await axios.get(fetchUrl)
    setMovies(request.data.results);
  }


  useEffect(()=>{
    fetchMovieData();
  }, [])

  return (
    <section className="row">
      <h2>{title}</h2>
      <div className="slider">
        <div className="slider__arrow-left">
          <span className="arrow">{"<"}</span>
        </div>

        <div id={id} className="row__posters">
          {movies.map((movie)=>
            (
              <img
                key={movie.id}
                className={`row__poster ${isLargeRow && "row__posterLarge"}`}
                src={`https://image.tmdb.org/t/p/original/${
                  isLargeRow ? movie.poster_path : movie.backdrop_path
                } `}
                loading="lazy"
                alt = {movie.name}
              />
            ))}
        </div>

        <div className="slider__arrow-right">
          <span className="arrow">{">"}</span>
        </div>
      </div>
    </section>
  )
}

export default Row

 

답변 2

·

답변을 작성해보세요.

2

성민석님의 프로필

성민석

2022.08.11

리액트의 실행순서에 의해 위와 같은 에러가 나오는 것입니다

1. 리액트는 렌더링되는 부분이 먼저 실행됩니다

movies state에 언제 값이 들어갈까요?

useEffect에서 fetchMovieData()를 실행할때겠죠?

하지만 리액트는 렌더링을 먼저 하기에 렌더링을 할때에는 movie안에는 아무 값도 없습니다 그래서 null이 나오는 것입니다

렌더를 다하고 useEffect()가 실행이 되어 movie가 set이 되어 다시 한번더 렌더를 하면 이때 결과물이 제대로 나옵니다

 

추가로 저도 위와 비슷한 질문을 했었는데 john 티처께서 자세하게 답 달아주셨습니다

https://www.inflearn.com/questions/598845

0

마야님의 프로필

마야

질문자

2022.08.11

감사합니다 이해했어요

방어코드에 대해 생각해봐야겠네요

Chetan Thakur님의 프로필

Chetan Thakur

2023.02.03

Got same issue any defence code