渲染组件属性来自 componentDidMount React 中的获取

Question

我正在尝试渲染一个需要传递给它的道具的组件。这些道具需要只能来自 api 获取的数据。问题是我正在从 componentDidMount 中的 api 中获取，但是 render 方法在 componentDidMount 方法之前安装，所以它说它无法读取未定义的属性因为它试图在获取数据。 heroImage 是一个在 fetch 调用期间存储到状态中的对象，但在 fetch 调用之前它不存在于状态中。

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 组件的图像道具时遇到问题。这是因为它需要仅来自 fetch 调用的 heroImage 对象存在，以便它可以 select backdrop_path 属性从它。由于 render 方法首先安装，因此对象永远不会存储在状态中。这是我需要帮助解决的问题。谢谢

Answer 1

只需像这样添加一个迭代检查即可。所以只有当 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>
        );
    }

渲染组件属性来自 componentDidMount React 中的获取

Rendering component with property coming from fetch in componentDidMount React

javascript

fetch

reactjs

fetch-api

渲染组件 属性 来自 componentDidMount React 中的获取

Rendering component with property coming from fetch in componentDidMount React

javascript

fetch

reactjs

fetch-api

渲染组件属性来自 componentDidMount React 中的获取