Question

我有一个项目有一个或多个taskTrees。

对于每个taskTree，我有多个任务。

问题是每当我添加新任务时，在刷新页面之前我都没有看到任务被添加。

我正在使用Meteor React 1.2.1以及以下软件包

react
kadira:flow-router
meteortoys:allthings
kadira:react-layout

我也有3个收藏。

Projects = new Mongo.Collection("projects")
TaskTrees = new Mongo.Collection("task-trees")
Tasks = new Mongo.Collection("tasks")

我的收藏结构如下：

**Projects**
_id
taskTrees: [taskTreeId]

**TaskTrees**
_id
tasks: [taskId]

**Tasks**
_id
title

我使用FlowRouter渲染ProjectPage

FlowRouter.route('/project-page', {
    action(params, queryParams) {
        ReactLayout.render(ProjectPage)
    }
})

这是我的3个反应类

ProjectPage = React.createClass({
    mixins: [ReactMeteorData],

    getMeteorData() {
        Meteor.subscribe('project-page')
        return {
            taskTrees: TaskTrees.find().fetch()
        }
    },

    renderTaskTrees() {
        if(this.data.taskTrees) {
            return this.data.taskTrees.map( (taskTree) => {
                return <TaskTree
                    key={taskTree._id}
                    taskTreeId={taskTree._id} />
            })
        }
    },

    render() {
        return(
            <div>
                RenderingTaskTree
                {this.renderTaskTrees()}
            </div>
        )
    }
})

TaskTree = React.createClass({
    mixins: [ReactMeteorData],

    getMeteorData() {
        Meteor.subscribe('task-tree', this.props.taskTreeId)
        return {
            tasks: Tasks.find().fetch()
        }
    },

    renderTasks() {
        if(this.data.tasks) {
            return this.data.tasks.map( (task) => {
                return <Task
                    key={task._id}
                    title={task.title} />
            })
        }
    },

    render() {
        return(
            <div>{this.renderTasks()}</div>
        )
    }
})

Task = React.createClass({
    render() {
        return(
            <div>
                <div>Title: {this.props.title}</div>
            </div>
        )
    }
})

这是我在服务器文件夹中的发布方法

Meteor.publish('project-page', () => {
    const project = Projects.findOne()
    if(project.taskTrees) {
        const taskTrees = TaskTrees.find({_id: {$in: project.taskTrees}})
        return taskTrees
    }
    this.ready()
})

Meteor.publish('task-tree', (taskTreeId) => {
    const taskTree = TaskTrees.findOne({_id: taskTreeId})
    if(taskTree.tasks) {
        const tasks = Tasks.find({_id: {$in: taskTree.tasks}})
        return tasks
    }
    this.ready()
})

Answer 1

我认为将[ReactMeteorData]所需的订阅全部放在ProjectPage组件中，然后将反应数据props传递给其子级更有意义。

此外，您应该直接在发布功能中返回游标，如mentioned here。

所以你的第一个发布函数现在看起来像这样：

if(project.taskTrees) {
    return TaskTrees.find({_id: {$in: project.taskTrees}});
}

Meteor React 2 Level down collection停止被动反应

1 个答案: