Question

我正在从API获取数据，但似乎无法获得onClick侦听器来处理返回的结果

  async componentDidMount() {
    const response = await fetch('/api/mediabuys');
    await response.json().then(data => {
      let markets = data.mediabuys.map(function(item)  {
        return(
          <tr key={item.id}>
            <td onClick={this.openWindow.bind(this)}>{item.name}</td>
          </tr>
        )
      })
      this.setState({markets: markets});
    })
  }

  openWindow() {
    console.log('a');
  }

我收到的错误是：

Uncaught (in promise) TypeError: Cannot read property 'openWindow' of undefined

如果我将this.openWindow添加到ComponentDidMount的开头，则它能够运行该函数，并且我在构造函数中也有this.openWindow = this.openWindow.bind(this)。如何获取onClick以查看该功能？

Answer 1

更改

 function(item)  {

到

 item => {

以防止上下文丢失。

Answer 2

这是因为您当前绑定到本地范围。更改：

function(item)  {

收件人：

(item) => {

箭头功能将允许您访问父范围。

Answer 3

您不需要两次绑定this，因此只需将this.openWindow传递给onClick属性就足够了。 https://reactjs.org/docs/handling-events.html 同样，function文字将不会绑定this，因此您需要使用新的箭头语法为map传递函数。

Answer 4

使用.map绑定传递给this的匿名函数。或使用 Arrow 函数。

let markets = data.mediabuys.map(function (item) {
  return (
    <tr key={item.id}>
      <td onClick={this.openWindow}>{item.name}</td>
    </tr>
  )
}.bind(this))

或者，

let markets = data.mediabuys.map( (item) => {
  return (
    <tr key={item.id}>
      <td onClick={this.openWindow}>{item.name}</td>
    </tr>
  )
})

通过两种方式，传递给map函数的函数都可以访问外部上下文this。

用外部函数反应componentdidmount返回状态

4 个答案: