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

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

영화 나열을 위한 Row 컴포넌트 생성하기

작성

254

안녕하세요 선생님 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

Next.js typescript react redux tdd

답변 1

성민석

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

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

2021신년다짐

질문자

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

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

성민석

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

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

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

2021신년다짐

질문자

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

도움 주셔서 감사합니다!

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

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