Question

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

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

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

})

然而，当我记录this.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());

    }

PROPS日志：错误信息：

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

我删除了＆＃34;愚蠢的＆＃34;从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始终是一个好习惯。这将取代你傻傻的＆＃34;检查并使用例如具有空数组的初始数据填充商店。

Answer 2

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

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

在提取数据之前，这将记录undefined而不是抛出错误。

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

2 个答案: