反应-TypeError：无法读取未定义的属性'imageurl'

Question

I looked all over the internet and still couldn't find the right answer. I get this error 'TypeError: Cannot read property 'imageurl' of undefined'. React is rendering first before componentDidMount or anything else I have tried.

This is my component:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchProductImageBackground } from '../../Redux/actions';

class ProductCategoryPage extends Component {

    componentDidMount() {
        fetchProductImageBackground();
    }


    render() {
        return (
            <div className="productCategoryPage" style={{backgroundImage: `url(${this.props.backgroundImages[0].imageurl})`}}>
                <div className="productCategoryPage__section">
                    <p className="productCategoryPage__section-type">product category</p>
                    <h1 className="productCategoryPage__section-title">category</h1>
                </div>
                <div className="productCategoryPage">

                </div>
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        backgroundImages:state.productCategoryBackgroundImage
    }
}

export default connect(mapStateToProps, null)(ProductCategoryPage);

Answer 1

Just do

if (!this.props.backgroundImages) return null;

at the beginning of your render() method. Once the data is in place, your component gets rendered again.

How does fetchProductImageBackground() look like? In case it's synchronous, you could also call it during Redux store initialization. Otherwise, you'd need to handle the "we're waiting for data" case anyway.