Meteor React 2降级收集停止反应

Question

I have 1 project with one or more taskTrees.

For each taskTree, I have multiple tasks.

The problem is whenever I add new task, I don't see the task being added until I refresh the page.

I am using Meteor React 1.2.1 with following packages

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

I also have 3 collections.

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

My collection structure looks like this:

**Projects**
_id
taskTrees: [taskTreeId]

**TaskTrees**
_id
tasks: [taskId]

**Tasks**
_id
title

I use FlowRouter to render ProjectPage

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

This is my 3 react classes

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>
        )
    }
})

This is my publish method in server folder

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

I think it makes more sense for you to put the subscribes you need from [ReactMeteorData] all inside the ProjectPage component, and then pass the reactive data as props to its children.

Also, you should return the cursors directly in your publish functions, as mentioned here .

So your first publish function would now look like this:

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