javascript - 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)它在这里是没有用的，因为 bind 只是更改 loadXML 函数的 this 关键字。实际上，React 附带了一组您应该使用的函数，因为 loadXML 的目的是从外部源获取数据。

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

最佳做法是:

• 在 contructor() 函数中设置您的初始状态
• 加载外部数据(在 componentDidMount() 函数中用 XMLHttpRequest 做什么

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

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

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

您可以直接运行代码片段，数据是基于 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>

希望这对您有所帮助!