Question

我是React的新手。我试图将一个on-click处理程序与React中循环中呈现的组件相关联，但我得到一个prop undefined错误。我的代码如下：

import React, { Component } from 'react';
import './ImageGallery.css';

class ImageGallery extends Component {

  constructor(props) {
    super(props);
    this.selectImage = this.selectImage.bind(this);
  }

  selectImage(e){
    console.log(e.target);
  }

  render() {
    return (
      this.props.images.map(function(e, i){
        return <img alt={i} key={i} src={e} className="thumbnail" onClick={this.selectImage}/>
      })
    )
  }
}

export default ImageGallery;

不幸的是，关于列表和键的文档对我的场景不太支持，因为它不包括事件：https://reactjs.org/docs/lists-and-keys.htm

错误消息为：Cannot read property 'selectImage' of undefined

Answer 1

使用箭头功能

将您的map回调替换为以下内容

this.props.images.map((e, i) => {
  return <img alt={i} key={i} src={e} className="thumbnail" onClick={this.selectImage}/>
})

或在this声明

之前保存return

const that = this;
return (
  this.props.images.map(function(e, i){
    return <img alt={i} key={i} src={e} className="thumbnail" onClick={that.selectImage}/>
  })
)

它可能对您有用 - this如何在javascript中运行。

Answer 2

您在渲染时将其用于map（）函数。它改变了这个this 参考

你可以在下面这样做。请注意变量me

render() {
  let me = this;
  return (
    this.props.images.map(function(e, i){
      return <img alt={i} key={i} src={e} className="thumbnail" onClick={me.selectImage}/>
    })
  )
}

Answer 3

您可以使用箭头函数而不是function语法，这样您的this对象将引用函数外部的上下文 - 例如

arr.map((e, i) => { /* 'this' refers to your component, not internal scope of the function */ })

无法在render循环中读取undefined的属性

3 个答案: