マップの閉鎖の中で未定義の「小道具」

Question

TypeError: Cannot read property 'props' of undefinedを取得します。 propsを受け取るには、Liコンポーネントが必要です。私は途中でスタイル付きコンポーネントを使用しています。

const Li = styled.li` 
    border-top: 0 none; 
`; 

class Popular extends Component { 
    render() { 
     var languages = ['All', 'Javascript', 'Java', 'Python']; 
     return (
      <ul className='list-group'> 
       {languages.map(function(lang){ 
        return (
         <Li className={`list-group-item p-2 ${this.props.className}`}> 
          {lang} 
         </Li> 
        ) 
       })} 
      </ul> 
     ); 
    } 
} 

export default Popular; 

Answer 1

あなたはpopularクラスにlanguages.mapのコールバックをバインドする必要があります。あなたはこの

{languages.map((lang) => { 

のように矢印の機能を使用するか、ちょうどこの

{languages.map(function(lang){ 
     ... 
}, this)} 

のようなマップ関数の第二引数としてthisを渡すか、またはあなたはそれがこの

{languages.map((function(lang){ 
     ... 
}).bind(this))} 

よう bind機能を使用してバインドすることができますすることができますいずれか