react 方法未定义_React - 将组件绑定功能时未定义(React - this is undefined when binding function to component)...

I have this code. I imported some components from Semantic UI.

import React from 'react'

import { Card, Image, Grid } from 'semantic-ui-react'

I am trying to call function when error (404) appears when loading image.

export default class HotelCards extends React.Component {

// constructor

constructor(props){

super(props)

this.handleError = this.handleError.bind(this);

}

// state

state = {}

This is the function I'd like to call: (not that if I log this inside render function I get instance of current class)

handleError() {

console.log(this);

}

render() {

if (!this.props.hotels) return null;

return (

{

this.props.hotels.map(function(e, i) {

return (

From this element:

)

})

}

);

}//render

}//class

However I get error that this is undefined.

TypeError: this is undefined

Stack trace:

render/

...

In vanilla JavaScript my approach for this would be

How do I bind this function to component properly?