私は2つの内部ループを持っているときに、このプロパティを親プロパティにすることはできません

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

}