javascript - 'This' 在使用 react 解析 xml API 时未定义

Question

我一直在尝试从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)

    })
  }

标签： javascriptxmlreactjsapithis

Answer 1

我看到你正在使用正常的功能，你错过bind(this)了getData()

onClick={this.handleChange}

// should change to

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

bind(this)并确保你getData()

使用箭头功能会更容易

handleChange = (evt) => {}

你不需要箭头bind(this)功能