React JS:在.map函数中调用时函数未定义

时间:2018-03-07 19:18:33

标签: javascript reactjs this array.prototype.map

当我在React中使用 map 函数时,我无法使用我已在构造函数中绑定的函数。在下面的代码中,imageClick在下面的map函数中使用时未定义,尽管我已将该函数绑定并包含this作为参数。知道什么可能是错的吗?

export default class ScrapeInstagram extends React.Component { 

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

imageClick() {
  console.log("made it here!")
}

render() {
    return (
    <Container>
        <center>
            <h1> A bunch of photos! </h1>
            <div className="box">
            {this.searchResults.map(function(photo){
                return <div className="dataSetBox" key={photo.toString()}><img id={id} src={photo} onClick={this.imageClick} alt="Image" height="350" width="450" margin="15px" border= "10"/></div>;
            }, this)}
            </div>
        </center>
    </Container>  
    );
}
}

1 个答案:

答案 0 :(得分:2)

使用ES6箭头功能,可帮助您访问封闭上下文的this

{this.searchResults.map(photo) =>
    return <div className="dataSetBox" key={photo.toString()}><img id={id} src={photo} onClick={this.imageClick} alt="Image" height="350" width="450" margin="15px" border= "10"/></div>        
)}