this.propsはarray.map（item、i）で未定義を返します

Question

特定の配列項目の内容を小道具として渡し、特定のREST関数をトリガーするために使用しますが、item.roomと。console.log(this.props.myProp)後に、私が定義されていない印刷物私は私がステップバイステップを見つけることができるすべてのリソースに従っていることを見つけ、まだ助けてください小道具が私のコンソールに出没されているようです

失敗コード;。！

class Lights extends Component { 
    lumin() { 
    console.log(this.props.lumer + " clicked!") 
    } 
    render() { 
    return(
     <div className="Lights"> 
     <div className="link-wrapper"> 
      {[ 
      { 
       room: 'Office' 
      }, 
      { 
       room: 'Office Bathroom' 
      }, 
      { 
       room: 'Neekon Bedroom' 
      }, 
      { 
       room: 'Ryan Room' 
      }, 
      { 
       room: 'Homework Room' 
      }, 
      { 
       room: 'Living Room' 
      }, 
      { 
       room: 'Gallery' 
      }, 
      { 
       room: 'Guest Bathroom' 
      }, 
      { 
       room: 'Dining Room' 
      }, 
      { 
       room: 'Kitchen' 
      }, 
      { 
       room: 'Master Bedroom' 
      }, 
      { 
       room: 'Family Room' 
      } 
      ].map((item, i) => { 
      return (
       <a onClick={this.lumin.bind(this)} lumer={item.room} className="toggle-text"> 
       {item.room}</a>) 
      })} 
     </div> 
     </div> 
    ) 
    } 
} 

Answer 1

を問題は、親コンポーネントの子コンポーネントのpropsを調べようとしていることです。lumin() fあなたのLightsコンポーネントには操作がありますが、<a>コンポーネントの代用品としてlumerを渡してください。

最も簡単な修正が代わりに行う代わりに

onClick={ this.lumin.bind(this) } 

で次のようになります。

onClick={() => this.lumin(item.room) } 

を直接関数に部屋に渡す（this.props.lumerを読もうとしません）。

しかし、より適切なソリューションは、<a>をカスタムコンポーネントに置き換えて、lumin()関数をそれに移動することです。

// Lights component 
[].map(item => <RoomLight lumer={ item.room } key={ i } />) 

// RoomLight component 
class RoomLight extends React.Component { 
    lumin() { console.log(this.props.lumer + ' clicked'); } 

    render() { 
     return <a onClick={ this.lumin.bind(this) }>{ this.props.lumer }</a>; 
    } 
} 

そして理想的には、レンダリング時に矢印機能を使用しないでください。これは、パフォーマンスヒットを作成します。代わりにbind()コンストラクタ内に：

class RoomLight extends React.Component { 
    lumin() { console.log(this.props.lumer + ' clicked'); } 

    constructor(props) { 
     super(props); 

     this.lumin = this.lumin.bind(this); 
    } 

    render() { 
     return <a onClick={ this.lumin }>{ this.props.lumer }</a>; 
    } 
}