값으로 객체 내의 객체에 액세스

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 파일이 있습니다. 구성 요소는 그래서 다음과 같습니다 나는 subcats 부모 개체에서 개체에 도달하기 위해 노력하고

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 값을 내뱉습니다.이 값은 대상으로 지정할 "부모"개체입니다. 내가 갇혀 있지만 두 가지를 이루려고합니다 :

첫 번째 - 배열의 첫 번째 항목을 참조하지 않고 첫 번째 "상위"개체에 액세스하고 싶습니다. catId의 값은 parMenu1입니다. 이 목록은 앞으로 동적이 될 것이고 첫 번째 배열 객체를 참조하는 것이 신뢰할 수 없기 때문입니다.

secondy - 내가 그 값 "8 비트"

Answer 1

당신은 두 가지를 달성하기 위해 .find()을 사용할 수를 반환 할 키 genre 예에 관련된 값 이잖아에 subcat 개체에 액세스하고 좀하고 싶습니다. 모든 subcats를 인쇄하기 위해

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> 
     ) 
    } 
} 

편집

, 당신은 위의 더 JSON이 없습니다 .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