javascript - React componentdidmount 使用外部函数返回状态

Question

这个问题已经有答案了:

How to access the correct `this` inside a callback (15 个回答)

已关闭 4 年前。

我正在从 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

这是因为您当前绑定(bind)到本地范围。变化:

function(item)  {

致:

(item) => {

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