import React,{useEffect, useState} from 'react'
import { FaCode } from "react-icons/fa";
import {API_URL, IMAGE_BASE_URL, API_KEY} from '../../Config';
import MainImage from './Sections/MainImage'
import GridCards from '../common/GridCards'
import {Row} from 'antd';
function LandingPage() {
const [Movies, setMovies] = useState([]);
const [MainMovieImage, setMainMovieImage] = useState(null);
function hookFunction(Movies, MainMovieImage){
setMainMovieImage(MainMovieImage)
// setMainMovieImage(response.results[0])
setMovies([Movies.results])
console.log(`Movies-> ${Movies}`, `MainMovieImage-> ${MainMovieImage}`);
}
function MoviesCall(){
Movies.map((movie, index) => {
console.log(index);
})
}
useEffect(() => {
const endpoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`;
fetch(endpoint)
.then(response => response.json())
.then(response =>{
hookFunction(response.results, response.results[0])
}
)
return () => {
console.log("I'm dying...");
}
}, [])
return (
<>
<div style={{width:'100%', margin:'0'}}>
{/* path오류는 값을 가져오기전 랜더링해버려서 그럼 */}
{/* MainImage */}
{MainMovieImage &&
<MainImage image={`${IMAGE_BASE_URL}w1280${MainMovieImage.backdrop_path}`}
title ={MainMovieImage.original_title}
text = {MainMovieImage.overview}
/>
}
<div style={{width:'100%', margin:'1rem auto'}}>
<h2>Movies by latest</h2>
<hr/>
{/* GridImage */}
<Row>
{Movies && Movies.map(function(movie, index){
console.log(`movie->>>${movie}`);
})}
</Row>
</div>
<div style={{ display:'flex', justifyContent:'center' }}>
<button>
Load More
</button>
</div>
</div>
</>
)
}
export default LandingPage
확인했는데요 렌더링부분에서 undefined가뜹니다.
답변 4
3
코딩왕
저도 위에분과 같은 증상이네요.
useEffect(() => {
const endpoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`
fetch(endpoint)
.then(res => res.json())
.then(res => {
console.log(res);
setMovies([res.results]) → setMovies(res.results) 로 수정하면 강의대로 진행됩니다.
setMainMovieImage(res.results[0])
})
}, [])
저같은 경우에, 문제 확인 차 여러가지 해본결과
setMovies([res.results]) 로 했을 경우에
{Movies && Movies.map((movie, index) => (
<React.Fragment key={index}>
<GridCards
image={movie.poster_path ?
`${IMAGE_BASE}w500${movie.poster_path}` : null }
movieId = {movie.id}
movieName={movie.original_title}
/>
</React.Fragment>
))}
movie에는 Object가 들어있어서, Object안 스탭에 접근을 못해서, undefined가 된것 같습니다.
{Movies && Movies.map((movie, index) => (
<React.Fragment key={index}>
<GridCards
image={movie[0].poster_path ?
`${IMAGE_BASE}w500${movie[0].poster_path}` : null }
movieId = {movie[0].id}
movieName={movie[0].original_title}
/>
</React.Fragment>
))}
위와 같이 movie[0]처럼, index값을 지정해주면, 해당 index정보만 출력이 잘됩니다.
1
김관김관
ㅠㅠㅠ 선생님의 말씀에 힘입어 해결하였습니다.
에러 원인이 두가지 있었습니다.
그런데 선생님 코드에서는 setMovies에서[response.result]로 넣어주셨는데 이중배열이 아니라 그냥 배열로 사용되었는데
어떻게된걸까용??
function hookFunction(Movies, MainMovieImage){//response.result를 받고 다시 Movies.result호출 <-에러 1
setMovies([Movies.result])//[Movies]를 넣어주면 이중배열 setMovies(Movies)코드로 수정후 해결 <-에러 2
setMainMovieImage(MainMovieImage)
// setMainMovieImage(response.results[0])
console.log(`Movies-> ${Movies}`, `MainMovieImage-> ${MainMovieImage}`);
}
1
김관김관
console.log(`movie->>>${movie}`, `Movies=>>>>${Movies}`);
결과값 movie->>>undefined Movies=>>>>
console.log(`movie->>>${movie}`, `Movies=>>>>${Movies != null}`);
결과값 movie->>>undefined Movies=>>>>true
console.log(`movie->>>${movie}`, `Movies=>>>>${Movies != undefined}`);
결과값 movie->>>undefined Movies=>>>>true
Movies값 자체가 undefined가 나옵니다.
Movies값이 비어있다고생각했는데 undefined였던것같습니다.
첫번째 consol.log에서Movies값이 비어있어서 착각했었네요.
0
<Row>
{Movies && Movies.map(function(movie, index){
console.log(`movie->>>${movie}`);
})}
</Row>
여기서 movie 값이 undefined인가요 ? 아니면 Movies 자체가 undefined가 나오나요 ~ ?
