this.props使用array.map（（item，i）返回未定義

Question

我試圖將給定數組項的內容作為prop傳遞，然后使用它來觸發某些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()函數位於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>;
    }
}