简介:
我是 meteor 的新手,我已经阅读了有关此问题的文档和问题,但疑问仍然存在。 我的主要问题是我无法在客户端加载我的 MongoDb 数据(使用什么方法加载数据)。
示例:
我有一个具有以下文件夹结构的项目: image
在我的收藏 (People.js) 中,我有这个:
import { Mongo } from 'meteor/mongo';
export const People = new Mongo.Collection('people');
在服务器文件夹 ( main.js ) 中。 PS:我无法更改此文件。
import { People } from '../collections/people';
Meteor.startup(() => {
const TEST_DATA = [
{
something: 'This is a simple example',
}, ... ]
TEST_DATA.forEach(test => People.insert(test));
}
在 UI 文件夹中 (app.jsx)
import React, { Component } from 'react';
import { withTracker } from 'meteor/react-meteor-data';
import { Meteor } from 'meteor/meteor';
import {People} from '../collections/people';
export class App extends Component {
render() {
return (
<div>
<h3>Teste </h3>
{ console.log(this.users) }
{ console.log(People.find({}).fetch()) }
{ console.log(Meteor.subscribe('people')) }
</div>
);
}
}
export default withTracker(() => {
return {
users: People.find({}).fetch(),
};
})(App);
客户端文件夹(main.jsx):
import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import { App } from '../ui/App';
Meteor.startup(() => {
render(<App />, document.getElementById('app'));
});
调试:
我检查了数据库,发现它已填充。第一个 console.log 显示 undefined ,第二个 length:0 数组,第三个对象 {stop: ƒ, ready: ƒ, subscriptionId: "mJQHdGxka4xTCX7FZ"}
(我认为它返回这个是因为我没有在服务器上使用 publish () 来填充数据库)
我应该使用什么方法来获取这些数据?
最佳答案
将 app.jsx
更改为
import React, { Component } from 'react';
import { withTracker } from 'meteor/react-meteor-data';
import { Meteor } from 'meteor/meteor';
import {People} from '../collections/people';
export class App extends Component {
render() {
console.log(this.props.users)
return (
<div>
<h3>Teste </h3>
{ this.props.users.map((user) => { return (<div>user.something</div>) }) }
</div>
);
}
}
export default withTracker(() => {
Meteor.subscribe('people');
return {
users: People.find({}).fetch(),
};
})(App);
我已经按照我假设您希望它进行的方向进一步修改了代码。核心变化是它使用 this.props.users
。这就是可以找到 React 组件中的属性的地方,以及它们由 withTracker
返回的函数放置的位置。
这一切都假设您仍在使用 autopublish
(就像 meteor 在新项目中所做的那样,直到您将其删除)。如果你已经删除了那个包,那么你需要添加
Meteor.publish('people', () => {
return People.find();
});
在您的服务器代码中。
关于javascript - 如何使用 React 在 Meteor App 中加载数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58509475/