Javascript 将componentdidmount返回状态与外部函数进行反应

我从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');
  }

异步组件didmount（）{ const response=wait fetch（'/api/mediabowes'）； 等待response.json（）。然后（数据=>{ let markets=data.mediabuses.map（函数（项）{ 返回( {item.name} ) }) 这个.setState（{markets:markets}）； }) } openWindow（）{ console.log（'a'）； } 我得到的错误是：

未捕获（承诺中）类型错误：无法读取未定义的属性“openWindow”

如果我在ComponentDidMount的开头添加

this.openWindow

，它就能够运行函数，并且我在构造函数中也有

this.openWindow=this.openWindow.bind（this）

。如何获得onClick以查看函数？

更改

 function(item)  {

到

防止失去上下文。

更改

 function(item)  {

到

---

防止失去上下文。

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

function(item)  {

致：

---

箭头函数将允许您访问父作用域。

这是因为您当前正在绑定到本地作用域。更改：

function(item)  {

致：

---

箭头函数将允许您访问父作用域。

您不需要将

此

绑定两次，因此只需将

此.openWindow

传递到onClick属性就足够了。

---

另外，

function

literal将不会绑定

this

，因此您需要使用新的箭头语法为

map

传递函数。您不需要绑定

this

两次，因此只需将

this.openWindow

传递到onClick属性就足够了。

---

另外，

函数

literal不会绑定

此

，因此需要使用新的箭头语法为

映射

传递函数

使用

此

绑定传递给

的匿名函数。或者使用箭头功能

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.mediabuses.map（函数（项目）{
返回(
{item.name}
)
}.绑定（本）

或者

let markets=data.mediabuses.map（（项目）=>{
返回(
{item.name}
)
})

在这两种情况下，传递给
映射
函数的函数都可以访问外部上下文
this
将传递给
映射的匿名函数与
this
绑定。或者使用箭头功能

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.mediabuses.map（函数（项目）{
返回(
{item.name}
)
}.绑定（本）

或者

let markets=data.mediabuses.map（（项目）=>{
返回(
{item.name}
)
})

在这两种情况下，传递到
映射
函数的函数将有权访问外部上下文
此
您应该将数据存储在状态而不是jsx中，然后将该数据映射到渲染函数中，这将是更好的方法您应该将数据存储在状态而不是jsx中，然后将该数据映射到渲染函数中，这将是更好的方法