按值访问对象中的对象

Accessing object within object by value

本文关键字：对象 访问      更新时间：2023-09-26

我正在学习React-Redux，我在JSON文件中的对象导航中遇到了问题。我有以下文件JSON，该文件旨在呈现出一个侧导航:

export default function(){
    return [
            {
            catId:"parMenu1",
            parentCat:"Genres",
            subcat:[
                {
                    genre:"8Bit",
                    genreId:"1"
                },
                {
                    genre:"Acid House",
                    genreId:"2"
                }
           ]
           },
           {
            catId:"parMenu2",
            parentCat:"sounds",
            subcat:[
                {
                    genre:"blah",
                    genreId:"3"
                },
                {
                    genre:"blah House",
                    genreId:"4"
                }
           ]
    ]
}

我有JSON文件映射到一个组件的状态道具。组件看起来像这样:

class BrowseByCont extends Component {  
    render () {
        return (
            <div className="browseByContInner">
                {
                    console.log(this.props.reducerSidenav[0].catId)
                }
            </div>
        )
    }
}

function mapStateToProps(state) {
    return {
        reducerSidenav:state.reducerSidenav
    };
}

我正在尝试访问父对象中的子对象。JSON对象被链接到一个名为"reducerSidenav"的变量。到目前为止，我已经成功地将其放入我的JSON文件:this.props.reducerSidenav[0].catId。这将输出值parMenu1，这是我想要瞄准的"父"对象。我被困住的地方是，我试图实现两件事:

首先-我想访问第一个"父"对象，而不必引用数组中的第一项:reducerSidenav[0]，而是通过找到parMenu1值的catId。这是因为该列表在未来将是动态的，并且引用第一个数组对象是不可靠的。

其次-然后我想访问subcat对象并获得与密钥genre相关联的值，即返回值"8Bit"

您可以使用.find()来实现这两个目标。

class BrowseByCont extends React.Component {  
    render () {
        let first = this.props.reducerSidenav.find(item => item.catId === "parMenu1");
        let second = first.subcat.find(subcat => subcat.genre === "8Bit")
        return (
            <div className="browseByContInner">
                <div>{first.catId}</div>
                <div>{second.genre}</div>
            </div>
        )
    }
}

编辑

要打印所有子目录，必须使用.map() 

class BrowseByCont extends React.Component {  
    render () {
        let first = this.props.reducerSidenav.find(item => item.catId === "parMenu1");
        return (
            <div className="browseByContInner">
                {first.subcat.map(genreItem => 
                    <div key={genreItem.genreId}>{genreItem.genre}</div>)
                }
            </div>
        )
    }
}

jsfiddle

相关文章：