this.props liefert undefined mit array.map ((item, i)

Question

Ich versuche, den Inhalt eines bestimmten Array-Elements als Prop zu übergeben, und später verwenden, um bestimmte REST-Funktionen auszulösen, aber wenn ich item.room und übergeben console.log(this.props.myProp) später, finde ich, dass das, was druckt nicht definiert ich jede Ressource gefolgt habe ich Schritt für Schritt finden konnte, doch es scheint, dass Requisiten meine Konsole spukt Bitte helfen

Failing-Code;..!

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

Ihr Problem besteht darin, dass Sie versuchen, die props einer untergeordneten Komponente aus der übergeordneten Komponente zu betrachten .. Ihr lumin() f ist auf Ihrer Lights Komponente, aber Ihre lumer als Requisite zu Ihrer <a> Komponente.

Die einfachste Lösung wäre

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

stattdessen tun, anstatt sein:

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

und Pass in dem Raum auf die Funktion direkt (nicht versuchen this.props.lumer zu lesen).

Die passendere Lösung wäre jedoch, Ihre <a> durch eine benutzerdefinierte Komponente zu ersetzen und dann die lumin() Funktion zu verschieben.

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

Und im Idealfall keine Pfeilfunktionen beim Rendern verwenden. Es erzeugt einen Performance-Hit. Stattdessen bind() es im Konstruktor:

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