Question

我正在尝试解析我的React JS应用程序中的xml文件中的数据，但它似乎返回一个完整的xml对象，该对象包含25个左右的多维数据集＆＃39;元素。我有兴趣访问＆＃39;货币＆＃39;和＆＃39;率＆＃39;每个多维数据集的属性，并在下拉列表中输出每个多维数据集。有没有办法循环所有的立方体，并以某种方式针对这些？我正在尝试构建一个自动转换用户输入价格的货币转换器。

我的代码：

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

class Countries extends Component {
    constructor() {
        super();
        this.state = {
            countrycodes: [],
            exchangerates: []
        };
    }


componentDidMount(){
    fetch('http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml')
        .then(response => response.text())
        .then(str => (new window.DOMParser()).parseFromString(str, "text/xml"))
        .then(data => {
            const cubes = data.getElementsByTagName("Cube")
            for( const element of cubes) {
                if (!element.getAttribute('currency')) {
                    continue;
                }

                let countrycodes = element.getAttribute('currency')
                let exchangerates = element.getAttribute('rate')
                this.setState({
                    countrycodes: countrycodes,
                    exchangerates: exchangerates
                })                                
            }
        });       
    }


render() {
    return (

        <div className="container2">
            <div className="container1">
                <select>{this.state.countrycodes.map((country) => {
                    <option>{country}</option>})                                            
                }
                </select>
            </div>
        </div>
    )
    }
}

export default Countries;

谢谢，

罗伯特

Answer 1

使用getAttribute：

class Countries extends React.Component {
    constructor() {
        super();
        this.state = {
            countryCodes: []
        };
    }


  componentDidMount(){
    fetch({url: 'http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml'})
        .then(response => response.text())
        .then(str => (new window.DOMParser()).parseFromString(str, "text/xml"))
        .then(data => {
            const countryCodes = [];
            const cubes = data.getElementsByTagName("Cube");
            for (const element of cubes) {
                if (!element.getAttribute('currency')) {
                    // skip cube with no currency
                    continue;
                }
                countryCodes.push({ 
                    currency:element.getAttribute('currency'),
                    rate: element.getAttribute('rate')
                });
            }
            this.setState({countryCodes});
       });
    }

  render() {

    const options = this.state.countryCodes.map(
        ({currency, rate}) => (<option value={rate}>{currency} - {rate}</option>));
    return (
        <div className="container2">
            <div className="container1">
                <select>
                  {options}
                </select>
            </div>
        </div>
    )
  }
}

要检查您是否可以直接在浏览器控制台中打开http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml并运行fetch(...)：

如何访问xml Feed

1 个答案: