无法使用 React 显示 mongo 集合答案

【问题标题】：Not able to show mongo collection using React无法使用 React 显示 mongo 集合
【发布时间】：2016-12-19 16:13:12
【问题描述】：

我正在尝试使用 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});
});

【问题讨论】：

标签： javascript meteor reactjs collections

【解决方案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';

【讨论】：

【解决方案2】：

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

【讨论】：