두 개의 내부 루프가있을 때이 속성을 부모 속성으로 가져올 수 없습니다.

Question

복잡한 시나리오를 가지고 있는데 어떻게 처리해야하는지 혼란 스럽습니다. 다음과 같이 내가 배열을 가지고 :

stories=[ 
    { 
     "categ": "politics", 
     "arr": [{ 
      "t": 1 
     }, { 
      "t": 2 
     }, { 
      "t": 3 
     }] 
    }, 
    { 
     "categ": "Business", 
     "arr": [{ 
      "t": 1 
     }, { 
      "t": 2 
     }, { 
      "t": 3 
     }] 
    } 
] 

이 배열 안에 또 다른 배열을 가지고 실행되는 내용에 따라 내가 처음 배열을 통해 반복 할 필요가보고 첫 번째 배열 내부의 적절한 배열을 찾을 수있다. 예를 들어 비즈니스 카테고리와 관련된 배열을 가져 오려면 첫 번째 배열을 반복하고 비즈니스와 관련된 배열을 선택해야합니다. 이렇게하려면 다음 코드를 :

<div className="row"> 
       { 
        this.props.stories.map((item,i)=> <Story key={i} position={i} story={item} ></Story>) 

       } 
      </div> 

그래서 당신은지도 내가 처음 배열을 통해 반복 할 수 있음을 알 수있다. 이제는 this.props.categ을 사용하여 내가 원하는 범주에 액세스 할 수 있다고 생각합니다. 그래서 아래와 같이 STH하려면 코드를 변경해야 :

<div className="row" > 
       { 

       this.props.stories.map(function(snippet){ 
        if(snippet.categ==="politics"){ 
        return(
         snippet.arr.map((item,i)=> <Story key={i} position={i} story={item} ></Story>) 


        ); 

        } 
       }) 
       } 
      </div> 

그러나 위의 코드 "정치"에

가 하드 코딩되어 this.props.categ로 교체해야합니다. 그러나 곧 나는 내가 ES6 지방 화살표를 사용하지 않는이 때문에 부모를 잃어버린하고 있기 때문에 완전히 의미가

Uncaught TypeError: Cannot read property 'props' of undefined

을 말하는 오류가 있음을 대체한다. 어떻게이 일을 할 수 있습니까?

Answer 1

당신은

<div className="row" > 
      { 

      this.props.stories.map(function(snippet){ 
       if(snippet.categ===this.props.categ){ 
       return(
        {snippet.arr.map((item,i)=> <Story key={i} position={i} story={item} ></Story>}) 


       ); 

       } 
      }.bind(this)) 
      } 
     </div> 

같은 외부지도 기능을 결합 할 수 있습니다

무언가과 같이 D : 그 어떤 의미가있는 경우

외부 컨텍스트는 prop입니다. 또한 당신은 {}

다른 옵션은 화살표 기능을 사용하는 것입니다 안에 당신의 내면의지도 기능을 포함하는 것을 잊었다

<div className="row" > 
      { 

      this.props.stories.map(snippet) => { 
       if(snippet.categ===this.props.categ){ 
       return(
        {snippet.arr.map((item,i)=> <Story key={i} position={i} story={item} ></Story>}) 


       ); 

       } 
      }.bind(this)) 
      } 
     </div> 

Answer 2

기능을 입력하기 전에 this을 that으로 저장하십시오.

그런 다음 that.props.categ을 사용하여 바깥 쪽 this을 참조하십시오. 이것은 당신이 참조하는 기능을 매핑 할 수

render(){ 
    // place here 
    // at the top of render function 
    // but outside the return 
    var that = this; 

    return (
     {something.map(function(snippet){ 
      if (snippet.categ === that.props.categ){ 
       // do things here 
      } 
     })} 
    ); 

}