javascript - 使用来自 componentDidMount React 中的 fetch 的属性渲染组件

Question

我正在尝试渲染一个需要传递给它的 Prop 的组件。这些 props 需要的数据只能来自 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 对象存在，以便可以从中选择background_path 属性。由于渲染方法首先安装，因此对象永远不会存储在状态中。这是我需要帮助解决的问题。谢谢。

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>
        );
    }