react.js - react-react+redux返回的值嵌套太深后拿不到了？

问题描述

问 题

通过redux异步拿到了值后，返回给了connect的组件，在props中也能打印出来，但是这个数据嵌套
太深，当我一步一步去拿最终的menu数据时，每次都是最后一步报错，直接页面就不渲染了。
返回的props数据是这样的：

但是我这样定义值：

const menus = this.props.menus[0];
//Object {menu: Array[7], number: Array[4]},能够打印数据

const menus = this.props.menus[0].menu;
//报错：Uncaught TypeError: Cannot read property 'menu' of undefined
//并且页面加载不出来了

附带完整的出错组件：

class Category extends Component {
    constructor(props) {
        super(props)
    }

    render() {
        let menus = this.props.menus[0].menu;
        console.log(menus);

        return (
            <div className="container pos-rel mt">
                <div className="cate-container">
                    <div className="category">
                        <div className="category-box">
                            <ul className="ca-ul">
                                {
                                    [].map((item, index) => {
                                        const containerClass = item.content.length > 8 ? 'citem-detail citem-col-2' : 'citem-detail citem-col-1';
                                        return (
                                            <li className="ca-li" key={index}>
                                                <a className="cate-a" href="">{item.item}</a>
                                                <div className={containerClass}>
                                                    <ul className="citem-children citem-chi-col">
                                                        {
                                                            item.content.map((subMenu, index) => {
                                                                if(index >= 8) {
                                                                    return;
                                                                }
                                                                return (
                                                                    <li className="citem-chi-list" key={index}>
                                                                        <a href="#" className="choose">{subMenu}</a>
                                                                    </li>
                                                                )
                                                            })
                                                        }

                                                    </ul>
                                                    <ul className="citem-children citem-chi-col">
                                                        {
                                                            item.content.map((subMenu, index) => {
                                                                if(index >= 8 && index < 16) {
                                                                    return (
                                                                        <li className="citem-chi-list" key={index}>
                                                                            <a href="#" className="choose">{subMenu}</a>
                                                                        </li>
                                                                    )
                                                                }
                                                            })
                                                        }

                                                    </ul>
                                                </div>
                                            </li>
                                        )
                                    })
                                }

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

const mapStateToProps = (state) => {
    // console.log(state);
    return state;
}

// category.propTypes = {};
// category.defaultProps = {};

let wrapedCategory = connect(mapStateToProps)(Category);

export default wrapedCategory;

解决方案

解决了，，，，，是因为react初始的时候是没有拿到数据的，返回的是undefined，所有取不到menu的值，报错导致react不会执行后面的代码。所以解决方法是去判断每次拿到的数据是否有值，没有的话返回空div，有的话返回页面。

真心是个坑，耽误了半天时间醉醉醉的了。

这篇关于react.js - react-react+redux返回的值嵌套太深后拿不到了？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！