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>
        );
    }
}

首先，我不知道它是否能以这种方式完成。我确实找到了类似的问题，然而，答案中的代码没有得到很好的解释，我也不想在不理解它的情况下复制和粘贴一些代码（即使我想这样做，我可能也不会＃39; t，因为我不知道什么代表什么。我在这段代码中遇到的错误是在渲染函数中没有定义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如何以及何时执行bind函数中的代码。像在构造函数中那样绑定它在这里是无用的，因为this只是更改了loadXML函数的loadXML关键字。实际上，React带有一组您应该使用的功能，因为componentDidMount的目的是从外部源获取数据。

在您的情况下，loadXML是执行state的代码说明的正确位置。

最佳做法是：

在contructor()函数

XMLHttpRequest

加载外部数据（您在componentDidMount()函数

state

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

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

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

您可以直接运行代码段，数据是基于JSON的（不是XML），但我确定您可以根据您的情况进行调整。

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

希望这有帮助！

ReactJS让XMLHttpRequest无法正常工作

1 个答案: