Я пытаюсь сделать так, чтобы компонент, которому нужен реквизит, был передан ему. Эти реквизиты требуют данных, которые могут быть получены только из API-выборки. Проблема заключается в том, что я извлекаю данные из API в componentDidMount, но метод рендеринга монтируется перед методом componentDidMount, поэтому он говорит, что не может прочитать свойство undefined, потому что пытается рендерить компонент до того, как будут получены данные. heroImage - это объект, который сохраняется в состоянии во время вызова выборки, но он не существует в этом состоянии до вызова выборки.
class Home extends React.Component{
constructor(){
super();
this.state={
searchTerm: '',
movies: [],
error: false,
loading: false,
};
}
componentDidMount(){
const fetchMovies = async endpoint => {
const isLoadMore = endpoint.search('page');
try{
const result = await (await fetch(endpoint)).json();
this.setState(prev => ({
...prev,
movies: isLoadMore !== -1 ? [...prev.movies, ...result.results] : [...result.results],
heroImage: prev.heroImage || result.results[0],
currentPage: result.page,
totalPages: result.total_pages
}));
} catch(error){
alert(error);
}
}
console.log('...fetching');
fetchMovies(POPULAR_BASE_URL);
console.log('done fetching...');
}
render(){
const {heroImage} = this.state;
return(
<React.Fragment>
<HeroImage
image={`${IMAGE_BASE_URL}${BACKDROP_SIZE}${heroImage.backdrop_path}`}
title={heroImage.original_title}
text={heroImage.overview}
/>
</React.Fragment>
);
}
};
Приложению не удается прочитать изображение, которое передается в HeroImage составная часть. Это происходит потому, что для этого требуется объект heroImage, который поступает только из вызова fetch, чтобы он мог выбрать из него свойство background_path. Поскольку метод рендеринга монтируется первым, объект никогда не сохраняется в состоянии. Это проблема, мне нужна помощь в решении. Спасибо.