• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

Row 컴포넌트 생성하기 base_url not defined

22.08.13 11:50 작성 조회수 188

0

안녕하세요 선생님 Row 컴포넌트 생성하기에서
base_url 을 가져오지 못한다는 에러가 나오는데 어떤게 문제인건가요 ?
 
import React, { useEffect, useState } from 'react'
import axios from "../api/axios"

const Row = ({ title, fetchUrl, id, isLargeRow}) => {

const [movies, setMovies] = useState([])

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

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

return (
<section>
<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={`${BASE_URL}${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

답변 1

답변을 작성해보세요.

1

성민석님의 프로필

성민석

2022.08.13

코드 이렇게 바꿔보시겠어요?

src={`https://image.tmdb.org/t/p/original/${
                  isLargeRow ? movie.poster_path : movie.backdrop_path
                }`}

감사합니다. 근데 base_url 문제는 해결이 되었는데,

movies를 맵 돌릴수 없다고 나오는데, 콘솔로그 다시 확인해보니 request의 data 가 "" 로 찍히더라고요, 혹시 어느 부분을 확인하면 될까요 ??

성민석님의 프로필

성민석

2022.08.13

혹시 axios.js랑 requests.js 올려주실수 있을까요?

추가로 Row 프롭스 잘 전달하셨나요?

<Row title="Trending Now" id="TN" fetchUrl={requests.fetchTrending} />

props 전달할때 오타가 있어서 안나왔었어요. 오타 수정하니 잘 나옵니다.

도움 주셔서 감사합니다!