Компонент рендеринга со свойством, полученным из fetch в componentDidMount React - PullRequest
Новая
       24

Компонент рендеринга со свойством, полученным из fetch в componentDidMount React

0 голосов
/ 17 февраля 2020

Я пытаюсь сделать так, чтобы компонент, которому нужен реквизит, был передан ему. Эти реквизиты требуют данных, которые могут быть получены только из 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. Поскольку метод рендеринга монтируется первым, объект никогда не сохраняется в состоянии. Это проблема, мне нужна помощь в решении. Спасибо.

1 Ответ

1 голос
/ 17 февраля 2020

Просто добавьте чертову проверку следующим образом. Так что он рендерится только когда есть данные в heroImage 

   render(){
        const {heroImage} = this.state;
        return(
            <React.Fragment>
                heroImage && <HeroImage
                    image={`${IMAGE_BASE_URL}${BACKDROP_SIZE}${heroImage.backdrop_path}`}
                    title={heroImage.original_title}
                    text={heroImage.overview}
                />
            </React.Fragment>
        );
    }
...