javascript - React - 将函数绑定(bind)到组件时未定义

Question

我有这个代码。我从语义 UI 导入了一些组件。

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

我正在尝试在加载图像时出现错误 (404) 时调用函数。

export default class HotelCards extends React.Component {
  // constructor
  constructor(props){
    super(props)
    this.handleError = this.handleError.bind(this);
  }
  // state
  state = {}

这是我想调用的函数:(不是说如果我在渲染函数中记录 this 我得到当前类的实例)

  handleError() {
    console.log(this);
  }

  render() {
    if (!this.props.hotels) return null;
    return (
        <Grid doubling stackable columns="4" className="cards-container">
        {
            this.props.hotels.map(function(e, i) {
                return (
                  <Grid.Column key={i} className="card-column">
                    <Card>

从这个元素:

                      <Image src={e.hotel.image} onError={this.handleError} />
                    </Card>
                  </Grid.Column>
                )
            })
        }
      </Grid>
    );
  }//render
}//class

但是我收到错误消息，指出 this 是 undefined。

TypeError: this is undefined
Stack trace:
render/<@http://localhost:1337/app/bundle.js:63883:92
...

在 vanilla JavaScript 中，我的方法是

<img src="image.png" onError="this.onerror=null;this.src='/placeholder.jpg';" />

如何将此函数正确绑定(bind)到组件？

Answer 1

典型的方法是使用所谓的“后期绑定(bind)”，即

constructor() {
    // ...
    this.handleError = this.handleError.bind(this);
}

handleError() {
    console.log('THIS', this);
}

您的代码不起作用的原因是您的粗箭头绑定(bind)到定义您的类的上下文。

或者，您也可以按照另一个答案中的建议在渲染级别进行绑定(bind)，因此:

<Image src={e.hotel.image} onError={this.handleError.bind(this)} />

但是，该解决方案的问题是它会在每次调用您的 render 方法时生成一个新的处理函数，如果您'正在使用某种属性相等性测试优化技术。