Javascript React-将函数绑定到组件时，这是未定义的

我有这个密码。我从语义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

，则不会得到当前类的实例）

在香草JavaScript中，我的方法是

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

---

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

ES6不支持类中的Fat arrow函数作为方法，因此首先必须将handError定义为如下方法：

handleError() {
    console.log('test');
}

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

您应该能够绑定到它，以便它可以在需要时使用它：

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

---

ES6不支持将Fat arrow函数作为类中的方法，因此首先必须将handError定义为如下方法：

handleError() {
    console.log('test');
}

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

您应该能够绑定到它，以便它可以在需要时使用它：

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

---

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

代码无法工作的原因是，fat箭头绑定到定义类的上下文

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

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

---

但是，该解决方案的问题在于，它在每次调用

render

方法时都会生成一个新的处理函数，如果您使用某种属性平等性测试优化技术，它可能（但不一定）会对渲染性能产生负面影响。

典型的方法是使用所谓的“后期装订”，即

代码无法工作的原因是，fat箭头绑定到定义类的上下文

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

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

---

但是，该解决方案的问题在于，它在每次调用

render

方法时都会生成一个新的处理函数，该函数可以（但不必）如果使用某种属性相等测试优化技术，则会对渲染性能产生负面影响。

好了，伙计们，我找到了

此

未定义的原因

这是因为这些东西发生在

.map

方法中，所以我必须像这样将

这个

绑定到它：

handleError() {
    console.log('test');
}

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

或者，正如@apendua所评论的，通过使用箭头函数，该不会丢失：

 this.props.hotels.map((e, i) => {
     ...
  })

---

好了，伙计们，我找到了

这个

是

未定义的原因

这是因为这些东西发生在
.map
方法中，所以我必须像这样将
这个
绑定到它：

handleError() {
    console.log('test');
}

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

或者，正如@apendua所评论的，通过使用箭头函数，该

不会丢失：

 this.props.hotels.map((e, i) => {
     ...
  })

---

---

添加this.state在组件构造函数中。

添加this.state在组件构造函数中。

@kunok:nice您找到了答案。箭头函数（=>）保持此上下文与封闭函数相同。

@kunok:nice您找到了答案。箭头函数（=>）保持此上下文与封闭函数相同。

您好，我已经尝试使用

.bind（this）

方法，但得到的错误与以前相同。（

此

未定义）可能是因为它无法识别handleError的胖箭头定义？请尝试“标准”方法定义。即使在向构造函数添加绑定后，

此

仍然是

未定义的

。我还更改了handleError方法定义。如果从控制台日志中删除“this”，错误是否会消失？（需要确定哪些是未绑定的。）核心问题在

map

方法中，我必须将

this

绑定到它。嗨，我已经尝试使用

.bind（this）

方法，但我得到了与以前相同的错误。（

此

是

未定义的
）可能是因为它无法识别handleError的胖箭头定义？请尝试“标准”方法定义。即使在向构造函数添加绑定后，
此
仍然是
未定义的
。我还更改了handleError方法定义。如果从控制台日志中删除“this”，错误是否会消失？（需要确定哪些未绑定。）核心问题是在
map
方法中，我必须将
这个
绑定到它。我尝试了两种方法，但仍然得到相同的
这个
是
未定义的
错误。你能确定错误是在哪一点抛出的吗？也许它不在
handleError
方法中？谢谢你的帮助，核心问题在
中>map
方法，我必须将
这个
绑定到它。太好了。我尽了最大努力！我尝试了两种方法，但仍然得到相同的
这个
是
未定义的
错误。你能确定错误是在哪一点抛出的吗？也许它不在
handleError
方法内？您好，谢谢您的帮助，核心问题在
map
中方法，我必须将
这个
绑定到它。太好了。祝你一切顺利！我刚刚注意到你没有将箭头函数传递给
映射
，所以
这个
的当前值丢失了！我刚刚注意到你没有将箭头函数传递给
映射
，所以
这个
的当前值丢失了！