this.props返回未定義與array.map（（項目，我）

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組件上，但是您的lumer作爲您的<a>組件的支柱。

最簡單的解決將是代替

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