React Redux：无法读取未定义的属性“0”

Question

我在尝试访问我的道具中的数据时一直遇到此错误。

我正在使用 @connect 装饰器将状态映射到道具，如下所示：

@connect((store) => {
    return {
        listAdProductsData: store.listAdProductsData.data,
        foxFooterData: store.foxFooterData.data
    }

})

但是，当我记录 this.props 时，我得到了三个 props 实例。其中两个在加载时未填充，第三个最终填充了数据。

我该如何解决这个问题？到目前为止，我发现的唯一方法是做一个“愚蠢”的检查，看看数据是否是一个空的对象数组，如下所示：

getData(prop) {
        if (prop.data === undefined) {
            return [{}];
        }

        return prop.data;
    }

我在 componentWillMount 中还有一个调度函数来获取数据 - 这样做有什么问题吗？ ：

componentWillMount() {
        //Fetch Ad Products Data
        this.props.dispatch(fetchAdProductsData())

        //Fetch List Ad Products Data
        this.props.dispatch(fetchListAdProductData())

        //Fetch Fox Footer Data
        this.props.dispatch(fetchFoxFooterData());

    }

道具日志： 错误信息：

JSON 数据：

这是我的组件代码：

import React from 'react';

import HeroVideo from '../../../assets/videos/HERO_Landing.mp4';

import styles from './styles.css';

export default class HeroModule extends React.Component {
    render() {
        let data = this.props.data[0];
        console.log("PROPS", data);
        console.log("Get data", data.productData[0].adProductsHeading);
        return (
            <div className="hero-wrap col-xs-12 no-padding">
                <div className="video-container">
                    <video width="100%" height="auto" autoPlay loop muted className="fillWidth">
                        <source src={HeroVideo} type='video/webm' />
                        <source src={HeroVideo} type='video/mp4' />
                        Your browser does not support HTML5 video. Please upgrade your browser!
                    </video>
                </div>
                <div className="hero">
                    <div className="hero-header-wrap">
                        <div className="hero-header">
                            <h1></h1>
                            <h2>The big picture?</h2>
                            <button className="btn">Watch Video</button>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

Answer 1

我会从 getData() 中删除“愚蠢”的检查，并将这一行添加到 render() 的开头

if (!this.props.data ) { // or !this.props.data.length if your have an empty array initially
    return null; // or some loading indicator 
}

这样可以确保只有在成功填充数据时才会执行剩余的 render() 代码。

在您的商店中拥有一个 initialState 始终是一个好习惯。这将取代“愚蠢”检查的需要，而是使用具有空数组的初始数据填充存储。

Answer 2

一种解决方案是使用 lodash _.get 安全地访问数据中深层嵌套的值。

console.log(_.get(this.props, 'data[0].productData[0].adProductsHeading'))

在获取数据之前，这将记录 undefined 而不是引发错误。