'This' 在使用 react 解析 xml API 时未定义答案

【问题标题】：'This' undefined in parsing the xml API using react'This' 在使用 react 解析 xml API 时未定义
【发布时间】：2019-04-05 01:21:41
【问题描述】：

我一直在尝试使来自XML 的数据在反应中可点击。这在其中一个函数中有效，但在另一个函数中调用它时会出错。

显示 = 未处理的拒绝 (TypeError)：无法读取未定义的属性“getAuthArticles”

我尝试过使用bind(this)。我已经在使用箭头函数了

getData() {
  fetch(`http://export.arxiv.org/api/query?search_query=ti:${'therapy'}&sortBy=lastUpdatedDate&sortOrder=ascending`).then(data=>data.text()).then(str => (new window.DOMParser()).parseFromString(str, "text/xml")).then(data => {
      var entry = data.getElementsByTagName("entry");
      let elems = []
      for(let i=0;i<entry.length;i++){
        console.log(entry);
        let elem = <div key={i} id={entry[i].getElementsByTagName("id")[0].textContent} onClick={this.handleChange}>{entry[i].getElementsByTagName("title")[0].textContent}</div>;
        elems.push(elem);
      }
      console.log(elems)
      this.setState({data: elems});
    })
}
/*  */
handleChange(evt) {
  console.log(evt.target.id)
  var res = evt.target.id.split("/");
  var id = res[5]
  fetch(`http://export.arxiv.org/api/query?id_list=${res[4]}/${id}`)
  .then(data=>data.text()).then(str => (new window.DOMParser()).parseFromString(str, "text/xml"))
    .then(data => {
      var summ = data.getElementsByTagName("summary");
      let auth = data.getElementsByTagName("author");
      let elems1 = [];
      let name = [];
      console.log(auth)

      for (let i = 0; i < auth.length; i++ ){
        console.log(auth[i].textContent);
        console.log(auth[i].getElementsByTagName("id"));
        let elem1 = <div key={i} id={auth[i].textContent} onClick={this.getAuthArticles.bind(this)}>{auth[i].textContent}</div>;
        name += auth[i].textContent;
        // elems1.push(elem1);
        // console.log(elem1)
      }
      document.getElementById("demo").innerHTML = summ[0].textContent + name;
      // window.history.pushState({}, "page 2", "bar.html");
      // this.setState({data: elems1});

    })
  }
  getAuthArticles(evt) {
    console.log(evt.target.id)
    let auth_name = evt;
    fetch(`http://export.arxiv.org/api/query?search_query=${auth_name}`)
    .then(data=> data.text()).then(str => (new window.DOMParser()).parseFromString(str, "text/xml"))
      .then(data => {
        var arti = data.getElementsByTagName("title");
        let titles = []
        for(let i=0;i<arti.length;i++){
          let elem = <div key={i} id={arti[i].getElementsByTagName("id")[0].textContent}>{arti[i].getElementsByTagName("title")[0].textContent}</div>;
          titles.push(elem);
        }
        console.log(titles)

    })
  }

【问题讨论】：

标签： javascript xml reactjs api this

【解决方案1】：

我看到您正在使用正常功能，而您在 getData() 中缺少 bind(this)

onClick={this.handleChange}

// should change to

onClick={this.handleChange.bind(this)}

并确保你 bind(this) 为 getData()

箭头这样的功能会更容易

handleChange = (evt) => {}

箭头功能不需要bind(this)

【讨论】：