javascript - 使用 ReactDOM 解析 React 中的 XML 问题

Question

我正在从文件解析我的 React 应用程序中的 XML 文件，如果我像硬编码 xml 一样编写文件监听器，我会得到正确的答案 (2):

const raw = `<?xml version="1.0" encoding="ISO-8859-1" ?>
  <?xml-stylesheet type="text/xsl" href="ACSPIXMT.xsl" ?>

  <IMPORT>
  <ACSPIX Type="2106" SN="UI00650521" Ver="3.05.01"/>
  <DEVICE  Name="Performa" SN="04666273"  ModelNum="591" Dt="2018-04-17" Tm="13:53" BGUnit="mg/dL">
  </DEVICE>
  <RECENTREC Dt="2014-02-11" Tm="18:47"/>
  <BGDATA>
  <BG Val="226" Dt="2014-02-11" Tm="18:47" D="1"/>
  <BG Val="149" Dt="2014-02-08" Tm="18:23" D="1"/>
  <BG Val="101" Dt="2014-02-07" Tm="20:56" D="1"/>
  <BG Val="275" Dt="2014-02-07" Tm="18:49" D="1"/>
  <BG Val="301" Dt="2014-02-06" Tm="19:13" D="1"/>
  <BG Val="112" Dt="2014-02-06" Tm="07:20" D="1"/>
  <BG Val="213" Dt="2014-02-05" Tm="19:42" D="1"/>
  <BG Val="111" Dt="2014-02-05" Tm="12:02" D="1"/>
  <BG Val="212" Dt="2014-02-04" Tm="19:18" D="1"/>
  </BGDATA>
  <STATISTIC>
  <ST_TIMERANGE Weeks="2" Dt="2014-02-11"/>
  <ST_EVALRESULTS Val="9"/>
  <ST_TSTFREQ1 Val="0.6"/>
  <ST_TSTFREQ2 Val="1.5"/>
  <ST_MBG Val="189"/>
  <ST_SD Val=" 74"/>
  <ST_HBGI Val="12.3"/>
  <ST_LBGI Val="0.0"/>
  </STATISTIC>
  <CHECK CRC="4816"/>
  </IMPORT>`;
const parser = new DOMParser();
const xml = parser.parseFromString(raw, 'text/xml');

console.log(xml.querySelector('ST_TIMERANGE').getAttribute('Weeks'));

但是如果我编写监听器来读取实际文件(内容完全相同)，我什么也得不到

handleSubmit(event) {

    const rawFile = new XMLHttpRequest();
    //here the file will be opened
    //submit pressed

    rawFile.onreadystatechange = () => {
      if (rawFile.readyState === 4 && (rawFile.status === 200 || rawFile.status === 0)) {




        const parser = new DOMParser();
        const xml = parser.parseFromString(rawFile.response, 'text/xml');

        var allText = rawFile.responseText;
        alert(allText);

        console.log(xml.querySelector('ST_TIMERANGE').getAttribute('Weeks'));

        // Do your querying here.
        // xml will can now be queried like DOM
        // var parsedResponse = xml.querySelector('ST_TIMERANGE').getAttribute('Weeks');
        // alert (xml.querySelector('ST_TIMERANGE')) // returns 2.

      }
    };

你能帮我吗？我做错了什么？

这是我的完整文件:

import React, { Component } from 'react';
import logo from './mainicon.png';
import './App.css';
import ReactDOM from 'react-dom';


class App extends Component {


// <img src={logo} className="App-logo" alt="logo" />



  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {

    const rawFile = new XMLHttpRequest();
    //here the file will be opened
    //submit pressed

    rawFile.onreadystatechange = () => {
      if (rawFile.readyState === 4 && (rawFile.status === 200 || rawFile.status === 0)) {




        const parser = new DOMParser();
        const xml = parser.parseFromString(rawFile.response, 'text/xml');

        var allText = rawFile.responseText;
        alert(allText);

        console.log(xml.querySelector('ST_TIMERANGE').getAttribute('Weeks'));

        // Do your querying here.
        // xml will can now be queried like DOM
        // var parsedResponse = xml.querySelector('ST_TIMERANGE').getAttribute('Weeks');
        // alert (xml.querySelector('ST_TIMERANGE')) // returns 2.

      }
    };

    rawFile.open('GET', this.App.files[0], false);
    rawFile.send();


    // var rawFile = new XMLHttpRequest();
    // var allText;
    // rawFile.open("GET", this.App.files[0], false);
    // rawFile.onreadystatechange = function ()
    // {
    //     if(rawFile.readyState === 4)
    //     {
    //         if(rawFile.status === 200 || rawFile.status == 0)
    //         {
    //             allText = rawFile.responseText;
    //             // alert(allText);
    //         }
    //     }
    // }
    // rawFile.send(null);
    //
    // alert(allText);

  }


  render() {
    return (
      <div className="App">
        <header className="App-header">

          <img src={logo} />
          <h1 className="App-title">Insulog</h1>
        </header>
        <p className="App-intro">
          Please Enter your insulog XML file at the button below
        </p>

        <form onSubmit={this.handleSubmit}>
        <label>
          Upload file:
          <input
            type="file"
            ref={input => {
              this.App = input;
            }}
          />
        </label>
        <br />
        <button type="submit">Submit</button>
      </form>


      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

export default App;

Answer 1

因此，您要做的就是允许客户端用户选择一个文件，然后您的应用程序将尝试解析 XML 文件并获取一个值。您不需要使用“XMLHttpRequest”，而是可以使用 native 浏览器“FileReader”，它将异步读取所选文件，并通过回调接收文件的内容。

您需要添加的一个主要内容是“event.preventDefault()”，以便在您按“提交”后不刷新页面。第二件主要事情是用“FileReader”替换“XMLHttpRequest”。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

    constructor(props) {
      super(props);
      this.handleSubmit = this.handleSubmit.bind(this);
      this.state = {output: ''};
    }

    handleSubmit(event) {
      event.preventDefault();

      const file = this.App.files[0];

      const reader = new FileReader();

      reader.readAsText(file);

      reader.onloadend = (evt) => {
        const readerData = evt.target.result;

        const parser = new DOMParser();
        const xml = parser.parseFromString(readerData, 'text/xml');

        alert(xml);

        const output = xml.querySelector('ST_TIMERANGE').getAttribute('Weeks');

        this.setState({output})
      };  
    }

    render() {
      return (
        <div className="App">
          <header className="App-header">

            <img src={logo} />
            <h1 className="App-title">Insulog</h1>
          </header>
          <p className="App-intro">
            Please Enter your insulog XML file at the button below
          </p>

          <form onSubmit={this.handleSubmit}>
            <label>
              Upload file:
              <input
                type="file"
                ref={input => {
                  this.App = input;
                }}
              />
            </label>
            <br />
            <button type="submit">Submit</button>
          </form>

          <h2>XML Readings of ST_TIMERANGE and WEEKS: {this.state.output}</h2>

        </div>
      );
    }
  }



ReactDOM.render(
  <App />,
  document.getElementById('root')
);

export default App;