Ошибка синтаксического анализа XML в реакции с использованием ReactDOM - PullRequest
Новая
       12

Ошибка синтаксического анализа XML в реакции с использованием ReactDOM

0 голосов
/ 21 мая 2018

Я анализирую XML-файл в моем приложении React из файла, если я пишу свой слушатель файла как жестко запрограммированный 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;

1 Ответ

0 голосов
/ 21 мая 2018

Итак, вы пытаетесь разрешить пользователю клиента выбрать файл, а затем ваше приложение попытается проанализировать файл XML и получить значение.Вам не нужно использовать «XMLHttpRequest», но вместо этого вы можете использовать собственный браузер «FileReader», который будет асинхронно читать выбранный файл и через обратный вызов вы получите содержимое файла.

Одна главная вещьВам нужно было добавить «event.preventDefault ()», чтобы страница не обновлялась после нажатия «Отправить».Вторым главным было заменить ваш «XMLHttpRequest» на «FileReader». 

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