0

我正在尝试从 samhsa.org API 在 React 应用程序中获取和显示数据。尽管我似乎无法获取节点值,但我能够 console.log 一个 XML 字符串。上周我已经筋疲力尽地试图弄清楚这一点。原谅我,我正在学习 React,对 XML 没有经验。当我运行时:

import React from 'react';
import axios from 'axios';
import PropTypes from 'prop-types';
import { parser, parseString } from 'xml2js';


function ResourcesGrid(props) {
  return (
    <div>
      <ul className='resources-list'>
        {props.resources.map((resource) => {
          return (
            <li key={resource.title} className='resource-item'>
              <ul className='space-list-items'>
                <li>{resource.description}</li>

              </ul>
            </li>
          )
        })}
      </ul>
    </div>
  )
}

ResourcesGrid.propTypes = {
  resources: PropTypes.array.isRequired
}

export default class Resources extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    }
  }
  componentDidMount () {
    let xml = 'http://content.samhsa.gov/ext/api/items?q-taxo=PanicDisorders~Recovery';
      return axios.get(xml)
    .then(function (res) {
      console.log(res.data);
      return res.data;
    });
    this.setState = {
      resources: resources
    }
  }
  render() {
    return (
      <div>
      {!this.state.resources
        ? <p>LOADING...</p>
        : <ResourcesGrid resources={this.state.resources} />
      }`enter code here`
      </div>
    )
  }
}

我得到一个包含 XML 字符串的对象:

包含 XML 字符串的对象

当我登录时,res.data我得到一个字符串。我不知道如何进入下一个级别(例如:)res.data["description"]

我试过'xml2js':

componentDidMount () {
    let xml = 'http://content.samhsa.gov/ext/api/items?q-taxo=PanicDisorders~Recovery';
      return axios.get(xml)
    .then(function (res) {
      parser.parseString(res, function(err,result){
        resData = result['data'];
        console.log(resData);
      });
      return resData;
    });
    this.setState = {
      resources: resources
    }
  }

并得到TypeError: Cannot read property 'parseString' of undefined

TypeError:无法读取未定义的属性“parseString”

我也尝试将其转换为 JSON。我走远了吗?我需要帮助!

4

0 回答 0