Question

我正在学习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文件映射到组件的状态props。该组件如下所示：

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对象链接到名为＆＃34; reducerSidenav＆＃34;的变量。到目前为止，我已经设法将这一点深入到我的JSON文件中：this.props.reducerSidenav[0].catId。这会吐出值parMenu1，这是＆＃34;父母＆＃34;我想要定位的对象。虽然我陷入困境，但我正在努力实现两件事：

首先 - 我想访问第一个＆＃34;父母＆＃34;对象，而不必引用数组中的第一项：reducerSidenav[0]，而是找到值为catId的{{1}}。这是因为这个列表将来是动态的，并且引用第一个数组对象是不可靠的。

secondy - 然后我想访问parMenu1对象并获取与键subcat关联的值，即返回值＆＃34; 8Bit＆＃34;

Answer 1

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

self.navigationController?.navigationBar.barTintColor = UIColor.green

修改

要打印所有子类，必须使用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()

jsfiddle

按值访问对象内的对象

1 个答案: