我试图创建一个简单的RSS提要阅读器,允许用户在搜索栏中输入网址并使用Meteor和React显示结果。在我目前的设置中,我有一个SearchBar组件,其中包含一个调用服务器上的meteor方法的函数。如何在客户端集合中存储API调用的返回值?我已经看过一些关于使用发布和订阅的例子,但是还没有能够效仿。我的目标是将这些数据保存在客户端集合中,以便我可以从任何需要它的组件访问它,而不必通过SearchBar组件的render方法呈现后续组件。这就是我目前设置的方式:
feeds.js
import { Meteor } from 'meteor/meteor';
import { HTTP } from 'meteor/http';
import parser from 'rss-parser';
if(Meteor.isServer) {
Meteor.methods({
getFeed(url) {
this.unblock();
const feed = {
title: '',
entries: []
};
try {
console.log('trying to get url');
const response = HTTP.get(url);
parser.parseString(response.content, function(err, parsed) {
feed.title = parsed.feed.title;
parsed.feed.entries.forEach(function(entry) {
feed.entries.push(entry);
})
});
console.log(feed.title);
return feed;
} catch(e) {
return false;
}
}
});
}
SearchBar.js
import React, { Component } from 'react';
import { Tracker } from 'meteor/tracker';
import FeedList from './FeedList';
export default class SearchBar extends Component {
constructor(props) {
super(props);
this.state = {
results: null,
url: ''
}
}
onSubmit(e) {
const { url } = this.state;
e.preventDefault();
const response = Meteor.call('getFeed', url, (err, res) => {
if(!err) {
this.setState({
results:res.entries
});
console.log(this.state.results);
} else {
console.log(err.reason);
}
});
}
onChange(e) {
this.setState({
url: e.target.value
});
}
render() {
return (
<div>
<form onSubmit={this.onSubmit.bind(this)}>
<input type="text" placeholder="Enter a URL" value={this.state.url} onChange={this.onChange.bind(this)}/>
<button type="submit">Get Feed</button>
</form>
{this.state.results ? <FeedList feedItems={this.state.results}/> : <p>Load a feed</p>}
</div>
);
}
}
答案 0 :(得分:-1)
根本不要在服务器上获取Feed。在客户端上获取它,并使用定义如下的本地集合保存它:
let localCollection = new Mongo.Collection(null)
关于评论:
典型的模式是让cron作业填充发布到客户端并在那里呈现的集合。
这将根据您的需求进行过度设计,并且通常被视为规范错误的答案。