在React中解析来自RSS feed的对象,为什么我的代码失败?
问题描述:
我想解析来自RSS提要的数据。我现在遇到的错误是'TypeError:无法读取未定义的属性'标题'(请参阅render()方法)。在React中解析来自RSS feed的对象,为什么我的代码失败?
getNews()方法似乎正常工作,并将项目对象数组保存为'news'(请参阅state),因为我在render方法中检查了'news'数组的长度是正确的(30)。我究竟做错了什么?
>class App extends Component {
constructor(props) {
super(props);
this.state = {
news: []
}
this.getNews = this.getNews.bind(this);
}
componentDidMount() {
this.getNews();
}
getNews() {
$.get("https://www.hs.fi/rss/tuoreimmat.xml", function (data) {
var $xml = $(data);
var items = [];
$xml.find("item").each(function() {
var $this = $(this),
item = {
title: $this.find("title").text(),
link: $this.find("link").text(),
description: $this.find("description").text(),
pubDate: $this.find("pubDate").text(),
}
items.push(item);
}.bind(this));
this.setState({ news: items })
}.bind(this));
}
render() {
var newsItem = this.state.news[1];
var title = newsItem.title
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">News</h1>
</header>
<div className="App-feeds">
</div>
<div className="panel-list">{title}</div>
</div>
);}}
答
您正试图在设置状态之前获取标题。一个简单的方法来解决这个只是:
var title = newItem && newItem.title
+0
这似乎已修复了错误消息,但它仍不显示标题? – jdet
ajax是** asyncnronous **。与试图在交付之前尝试吃披萨相同的问题 – charlietfl