-
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
Grid, Load More 버튼 클릭시 style error
21.11.18 17:56 작성 조회수 149
0
안녕하세요,
강의 잘 보던 중 두가지 질문이 생겼습니다.
#1.
첫번째는 grid gutter 관련인데요, 선생님과 코드를 똑같이 했지만 저는 아래쪽 여백이 적용이 되지 않습니다. 깃허브가서 코드 그대로 카피해서 해당 부분(<Row gutter~ / >, GridCards.js) 적용했는데 안되네요 ..:( 구글링해봐도 모르겠어서 질문드립니다.
#2.
Load More 버튼 클릭시 아래 첨부한 사진처럼 콘솔에 에러가 뜨는데요, 작동은 하는 상태이지만 에러는 사라지지 않아서 질문드립니다.
해당 부분 찾아보니 mainMovieImage 에 state set을 null값으로 주거나, {mainImage &&} 처럼 해당 데이터 있을 시 실행하도록 설정해주면 해결된다고 하더라고요. 근데 저는 그렇게 설정을 이미 해 놓은 상태인데 계속 오류가 떠서 .. 어떻게 해결해야 할까요?.. (Landing page 코드도 같이 첨부합니다)
// Defaults
import React, { useState, useEffect } from "react";
import { API_URL, IMAGE_BASE_URL } from "../../Config";
import { API_KEY } from "../../ConfigKey";
import { Row } from "antd";
// Components
import MainImage from "./Section/MainImage";
import GridCards from "../../common/GridCards";
function LandingPage() {
const [movies, setMovies] = useState([]);
const [mainMovie, setMainMovie] = useState(null);
const [currentPage, setCurrentPage] = useState(0);
useEffect(() => {
const endPoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`;
fetchMovies(endPoint);
}, []);
const fetchMovies = async (endPoint) => {
//response 데이터 받아옴
/* fetch(endPoint)
.then((res) => res.json())
.then((res) => {
console.log(res);
setMovies(res.results);
}); */
const json = await (await fetch(endPoint)).json();
setMovies([...movies, ...json.results]);
setMainMovie(json.results[0]);
setCurrentPage(json.page);
};
const loadItems = () => {
const endPoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=${
currentPage + 1
}`;
fetchMovies(endPoint);
};
return (
<div style={{ width: "100%", margin: "0" }}>
{/* Main Image */}
{mainMovie && (
<MainImage
image={`${IMAGE_BASE_URL}w1280${mainMovie.backdrop_path}`}
title={mainMovie.original_title}
text={mainMovie.overview}
/>
)}
<div style={{ width: "85%", margin: "1rem auto" }}>
<h2>Movies by latest</h2>
<hr />
{/* Movie Grid Cards */}
<Row gutter={(16, 16)}>
{movies &&
movies.map((movie, index) => (
<React.Fragment key={index}>
<GridCards
// LandingPage
image={
movie.poster_path
? `${IMAGE_BASE_URL}w500${movie.poster_path}`
: null
}
movieId={movie.id}
movieName={movie.original_title}
/>
</React.Fragment>
))}
</Row>
</div>
<div
style={{ display: "flex", justifyContent: "center" }}
>
<button onClick={loadItems}>Load More</button>
{/* 계속 style오류가 나는데 해결방법을 모르겠음.. */}
</div>
</div>
);
}
export default LandingPage;
+ 좋은 강의 감사합니다! :)
답변을 작성해보세요.
0
John Ahn
지식공유자2021.11.23
안녕하세요 !!
에러 로그를 보니깐 MainImage 컴포넌트에서 스타일링하는 부분에서 나오는 에러 같습니다 !
그 부분에 Css 작업한 부분을 다시 확인해주세요 ~
감사합니다!
답변 1