ReactJS 获取 XMLHttpRequest 不工作

Question

我正在尝试从 XML 文件中获取 XML 数据，并希望将某些节点值保存在列表中。这就是我尝试这样做的方式：

import React from "react";

class EditFiles extends React.Component {
    constructor(props) {
        super(props);
        this.loadXML = this.loadXML.bind(this);
    }

    loadXML = () => {

        var xhttp = new XMLHttpRequest();

        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {

                var xmlDoc = this.responseXML;
                var y = xmlDoc.getElementsByTagName("newFile");

                for(var i=0; i<y.length; i++) {

                    var NameArray = [y[i].getElementsByTagName("FileName")[0]];
                }

                const nameList = NameArray.map(name => 
                    <li>{name}</li>
                );
            }
        };

        xhttp.open("GET", "./FilenameList.xml", true);
        xhttp.send();

    }

    render() {
        return(
            <ul>{nameList}</ul>
        );
    }
}

首先，我不知道是否可以这样做。我确实发现了类似的问题，但是，答案中的代码没有得到很好的解释，我不想在不理解的情况下复制和粘贴一些代码（另外，即使我想这样做，我也可能做不到，因为我不知道什么代表什么。 我使用此代码得到的错误是 nameList 未在渲染函数中定义。我知道它必须是一个全局函数，但我不知道该怎么做。

我还阅读了这篇文章：https://medium.com/@catquarks/making-ajax-requests-with-react-48be0285d396，并希望像示例中那样做。但是我不是很明白，例如，我如何获取某些标签的值？

无论如何，总结一下我对这个问题的目标：我可以像以前那样使用 XMLHttpRequest 吗？我到底犯了什么错误？

我希望这不是到处都是。如果您需要更多信息/解释，请告诉我。

快速编辑：XML 文件看起来像这样：

<Files>
    <newFile>
        <FileName>file1</FileName>
    </newFile>
    <newFile>
        <FileName>file2</FileName>
    </newFile>
</Files>

我还要注意的是，xml 文件是动态创建的，因此无法预测会有多少 newFile 节点。

Answer 1

您需要告诉 React 如何以及何时执行 loadXML 函数中的代码。在这里像在构造函数中那样绑定它是没有用的，因为bind 只是更改了loadXML 函数的this 关键字。实际上，React 带有一组你应该使用的函数，因为loadXML 的目的是从外部源获取数据。

在您的情况下，componentDidMount 是执行loadXML 的代码指令的正确位置。

最佳做法是：

• 在contructor() 函数中设置您的初始state
• 加载外部数据（在 componentDidMount() 函数中使用 XMLHttpRequest 所做的事情

更一般地说，React Component Lifecycle 是一个非常有见地的资源，可以帮助您了解在显示和更新 React 组件时执行的各种功能。您可能会发现this example 也很有用。

您的数据已加载，然后使用您获得的数据更新组件的state。更新 React 组件的 state（或 props）会自动触发其 render() 函数并显示您的更改。

然后，在render() 函数中，只需根据组件的状态变量返回要显示的DOM 元素（或React 组件）即可。在以下示例中，我们使用 XMLHttpRequest 从 URL 下载 JSON 数据（帖子）并返回每个帖子的 title。我们告诉render() 检查posts 数组的长度，以便知道我们是否有帖子要显示。

您可以直接运行代码 sn-p，数据是基于 JSON 的（不是 XML），但我相信您可以根据自己的情况进行调整。

class EditFiles extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          posts: []
        }
    }

    componentDidMount() {
      var xhttp = new XMLHttpRequest();
      var self = this;
      
      xhttp.onreadystatechange = function(e){
        console.log(this);
        if (xhttp.readyState === 4 && xhttp.status === 200){
          console.log("ok, response :", this.response);
          self.setState({
            posts: JSON.parse(this.response)
          });
        }
      }
      xhttp.open("get", "https://jsonplaceholder.typicode.com/posts", true);
      xhttp.send();
    }

    render() {
      let postsLoaded = this.state.posts.length > 0;
      return(
        postsLoaded ?
          <ul>
          {
            this.state.posts.map(
              post => {
                return <li>{ post.title }</li>;
              })
          }
          </ul>
          :
          <div>Loading...</div>
      );
    }
}

ReactDOM.render(
  <EditFiles />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

希望这会有所帮助！