Question

我正在尝试使用react和Meteor列出我的项目集合。我有两个集合决议和项目。我能够在前端显示Resolution集合，但是我没有成功地在前端显示Projects集合。我不知道我做错了什么。

我在控制台中遇到的错误是：

 Projects.find() is not a function

我也在控制台中收到此错误：

warning.js:44 Warning: There is an internal error in the React performance measurement code. Did not expect componentDidMount timer to start while render timer is still in progress for another instance.

任何帮助都会非常感激，因为我遇到了这个问题，谢谢。

这是我在文件夹页面下列出的Projects.jsx文件：

import React, {Component} from 'react';
import TrackerReact from 'meteor/ultimatejs:tracker-react';
import ReacCSSTransitionGroup from 'react-addons-css-transition-group';

import ProjectsForm from '../projects/ProjectsForm.jsx';
import ProjectSingle from '../projects/ProjectSingle.jsx';

if(Meteor.isClient){
    Projects = new Mongo.Collection('projects');
}

export default class Projects extends TrackerReact(Component) {
    constructor(){
        super();

        this.state = {
            subscription: {
                projects: Meteor.subscribe('allProjects')
            }
        }
    }
    ComponentWillUnmount() {
        this.state.subscription.projects.stop();
    }
    projects() {
        return Projects.find().fetch();
    }
    render() {
        DocHead.setTitle('Projects | My Projects');
        return (
            <ReacCSSTransitionGroup
                component="div"
                transitionName="route"
                transitionEnterTimeout={600}
                transitionAppearTimeout={600}
                transitionLeaveTimeout={400}
                transitionAppear={true}>
                <h1>Projects</h1>
                <ProjectsForm />
                {this.projects().map((project) => {
                    return <ProjectSingle key={project._id} project={project} />
                })}
            </ReacCSSTransitionGroup>
        )
    }
}

这是ProjectSingle.jsx文件：

import React, {Component} from 'react';

export default class ProjectSingle extends Component {

    render() {
        return (
            <li>
                <a href={`projects/${this.props.project._id}`}>{this.props.project.text}</a>
            </li>
        )
    }
}

在我的服务器文件夹中，我有一个名为publish.js的文件，用于保存我的集合：

Projects = new Mongo.Collection('projects');
Meteor.publish('allProjects', function(){
    return Projects.find();
});

Meteor.publish('project', function(){
    return Projects.find({project: this.id});
});

Answer 1

听起来你没有正确引用你的Projects集合。不是在2个位置定义Projects集合，而是在可以从客户端和服务器引用的位置定义一次，然后根据需要导入它。例如：

1）创建一个新的文件夹/文件来保存您的Projects集合（遵循Meteor Guide's应用程序结构）：

<强> /imports/api/projects/collection.js

import { Mongo } from 'meteor/mongo';
const Projects = new Mongo.Collection('projects');
export default Projects;

2）修改您的客户端Projects.jsx文件以更改Projects个引用：

替换以下

if (Meteor.isClient){
  Projects = new Mongo.Collection('projects');
}

以下

import Projects from '/imports/api/projects/collection';

3）修改服务器端publish.js文件，如下所示：

替换以下

Projects = new Mongo.Collection('projects');

以下

import Projects from '/imports/api/projects/collection';

Answer 2

原来我需要将Projects.jsx文件的名称更改为ProjectsWrapper.jsx，因为名称空间Projects已被Collection使用。我可以做相反的事情并改变收藏品的名称，但我认为这是我拥有的最佳方式。

无法使用React显示mongo集合

2 个答案: