反應-TypeError：無法讀取未定義的屬性'imageurl'

Question

我在互聯網上四處張望，但仍然找不到正確的答案。 我收到此錯誤“ TypeError：無法讀取未定義的屬性'imageurl'”。 React是在componentDidMount或其他我嘗試過的東西之前先渲染的。

這是我的組件：

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

做就是了

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

在render（）方法的開頭。 數據放置到位后，組件將再次呈現。

fetchProductImageBackground()外觀如何？ 如果它是同步的，您還可以在Redux存儲初始化期間調用它。 否則，您仍然需要處理“我們正在等待數據”的情況。