RSS feed被解析为一个数组,但是问题是,该数组不会循环,它仅显示一项。如何循环我的Feeds
数组?
这是我的代码,我使用react-native-rss-parser
(https://www.npmjs.com/package/react-native-rss-parser):
class TNScreens extends React.Component {
state = {
feed: [],
title: []
};
componentDidMount() {
return fetch("https://vnexpress.net/rss/tin-moi-nhat.rss")
.then(response => response.text())
.then(responseData => rssParser.parse(responseData))
.then(rss => {
for (let i = 0; i < rss.items.length; i++) {
this.setState(prevState => ({
...prevState,
feed: rss.items[i],
title: rss.items[i].title
}));
}
});
}
render() {
const Feeds = ([
{
pic: {uri: ''},
title: Object.keys(this.state.title).map(i => this.state.title[i])
}
]);
return (
<SafeAreaView>
<ScrollView>
<Text h2 h2Style={styles.h2Style}>
Trang nhất
</Text>
<Text h4 h4Style={styles.h4Style}>
Cập nhật siêu nhanh
</Text>
<View>
{Feeds.map(({ pic, title }) => (
<Tile
imageSrc={pic}
height={200}
activeOpacity={0.9}
title={title}
titleNumberOfLines={1}
titleStyle={styles.title}
featured
key={title}
/>
))}
</View>
</ScrollView>
</SafeAreaView>
);
}
}
export default TNScreen;
UPDATE
console.log(rss)结果:
Object {
"authors": Array [],
"categories": Array [],
"copyright": undefined,
"description": "VnExpress RSS",
"image": Object {
"description": undefined,
"height": undefined,
"title": "Tin nhanh VnExpress - Đọc báo, tin tức online 24h",
"url": "https://s.vnecdn.net/vnexpress/i/v20/logos/vne_logo_rss.png",
"width": undefined,
},
"items": Array [],
"itunes": Object {
"authors": Array [],
"block": undefined,
"categories": Array [],
"complete": undefined,
"explicit": undefined,
"image": undefined,
"newFeedUrl": undefined,
"owner": Object {
"email": undefined,
"name": undefined,
},
"subtitle": undefined,
"summary": undefined,
},
"language": undefined,
"lastPublished": "Sat, 30 Nov 2019 21:28:12 +0700",
"lastUpdated": undefined,
"links": Array [
Object {
"rel": "",
"url": "https://vnexpress.net/rss/tin-moi-nhat.rss",
},
],
"title": "Tin mới nhất - VnExpress RSS",
"type": "rss-v2",
}
for循环中的代码中存在问题,您只是用一个值替换状态,而不是复制前一个状态。您将必须
this.setState(prevState => ({
...prevState,
feed: [...prevState.feed, rss.items[i]],
title: [...prevState, rss.items[i].title]
}));
但这不是最佳实践,因为在每次迭代中您的渲染都会重新渲染,因此最佳实践是
const feeds = rss.items.map(item => item);
const titles = rss.items.map(item => item.title);
this.setState({ feed: feeds, title:titles });
您的this.state.x仅保存一项,将代码更改为以下内容:并且您还应该更改get Data方法,请不要在循环中使用setState
componentDidMount() {
return fetch("https://vnexpress.net/rss/tin-moi-nhat.rss")
.then(response => response.text())
.then(responseData => rssParser.parse(responseData))
.then(rss => {
let copyRess = []
let copyTitle = []
for (let i = 0; i < rss.items.length; i++) {
copyRess.push(rss.items[i]);
copyTitle.push(rss.items[i].title)
}
this.setState(prevState => ({
...prevState,
feed: copuRess,
title: copyTitle
}));
});
}
render() {
const Feeds = []
this.state.title.map(element => {
Feeds.push({pic:"",title:element})
})
....