ReactJS获取XMLHttpRequest不起作用

Question

ReactJS获取XMLHttpRequest不起作用

3

我正在尝试从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>
        );
    }
}

首先，我不知道是否可以这样做。我找到了类似的问题，但是答案中的代码没有很好地解释，我不想只是复制和粘贴一些代码而不理解它（而且，即使我想这样做，我可能也做不到，因为我不知道什么代表什么）。

这段代码出现错误的原因是在render函数中未定义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节点。

- A.S.J

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Philippe Sultan · Accepted Answer

你需要告诉React何时以及如何执行你的loadXML函数中的代码。在constructor中绑定是无用的，因为bind仅仅是改变loadXML函数中的this关键字。实际上，React附带了一组应该使用的函数，因为loadXML的目的是从外部源获取数据。

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

最佳实践是：

在contructor()函数中设置初始state
加载外部数据（使用XMLHttpRequest在componentDidMount()函数中进行）

更普遍地说，React Component Lifecycle是一个非常有见地的资源，可以理解在显示和更新React组件时执行的各种功能。你可能也会发现这个例子很有用。

一旦你的数据被加载，就使用你获得的数据更新组件的state。更新React组件的state（或props）会自动触发其render()函数，并显示你的更改。

然后，在render()函数中，只需根据组件的状态变量返回DOM元素（或React组件）以显示。在以下示例中，我们使用XMLHttpRequest从URL下载JSON数据（帖子），并返回每个帖子的标题。我们告诉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>

希望这能帮到你！