我正在尝试从 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 字符串的对象:
当我登录时,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
:
我也尝试将其转换为 JSON。我走远了吗?我需要帮助!