this.props returns 未定义 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() 函数在您的 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>;
    }
}

this.props returns 未定义 array.map((item, i)

this.props returns undefined with array.map((item, i)

javascript

reactjs

react-jsx

react-proptypes