Question

我是Meteor的新人，我制作了一个社交媒体。我想要的是用户可以访问另一个用户配置文件并查看他的播放列表等。我使用React-Komposer作为数据，使用Flow-Router作为路由。

现在我在路上遇到了障碍物。我为Flow-Router提供了用户名参数并且工作正常，但看起来不像是为容器工作。

ProfilePagesContainer.js

import { Meteor } from 'meteor/meteor';
import { composeWithTracker, composeAll } from 'react-komposer';
import { useDeps } from 'react-simple-di';
import ProfilePages from '../../ui/pages/ProfilePages';

const composer = (pageUsername, onData) => {
  const userProfileHandle = Meteor.subscribe('user.single', pageUsername);
  if (userProfileHandle.ready()) {
    const profileUser = Meteor.users.find({ username: pageUsername }).fetch();
    onData(null, profileUser);
  } else {
    // UI component get a prop called `loading` as true
    onData(null, { loading: true });
  }
};

export default composeAll(
  composeWithTracker(composer),
  useDeps()
)(ProfilePages);

routes.js

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { mount } from 'react-mounter';
import { FlowRouter } from 'meteor/kadira:flow-router';

// Load the layout
import MainLayout from '../../ui/layouts/MainLayout';
import LoginLayout from '../../ui/layouts/LoginLayout';

// Import pages
import WelcomePages from '../../ui/pages/WelcomePages';
import LoginPages from '../../ui/pages/LoginPages';
import SignUpPages from '../../ui/pages/SignUpPages';

import ProfilePagesContainer from '../../ui/containers/ProfilePagesContainer';

FlowRouter.route('/', {
  name: 'default.route',
  triggersEnter: [(context, redirect) => {
    if (!Meteor.userId()) {
      redirect('/login');
    } else {
      redirect('/home');
    }
  }],
});

FlowRouter.route('/login', {
  name: 'login.route',
  action() {
    mount(LoginLayout, {
      content: (<LoginPages />),
    });
  },
});

FlowRouter.route('/signup', {
  name: 'signup.route',
  action() {
    mount(LoginLayout, {
      content: (<SignUpPages />),
    });
  },
});

FlowRouter.route('/home', {
  name: 'home.route',
  action() {
    mount(MainLayout, {
      content: (<WelcomePages />),
    });
  },
});

FlowRouter.route('/profile/:username', {
  name: 'profile.route',
  action({ username }) {
    mount(MainLayout, {
      content: (<ProfilePagesContainer />),
      pageUsername: username,
    });
  },
});

publications.js

import { Meteor } from 'meteor/meteor';
import { check } from 'meteor/check';

Meteor.publish('userData', function userData() {
  return Meteor.users.find({
    _id: this.userId,
  });
});

Meteor.publish('user.single', username => {
  check(username, String);
  const selector = { username };
  return Meteor.users.find({ selector }).fetch();
});

Answer 1

当我发布问题时，我看到了我的错误以及如何修复它。

首先，我需要订阅所有用户。

其次我需要将params传递给路径中的容器。

routes.js

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { mount } from 'react-mounter';
import { FlowRouter } from 'meteor/kadira:flow-router';

// Load the layout
import MainLayout from '../../ui/layouts/MainLayout';
import LoginLayout from '../../ui/layouts/LoginLayout';

// Import pages
import WelcomePages from '../../ui/pages/WelcomePages';
import LoginPages from '../../ui/pages/LoginPages';
import SignUpPages from '../../ui/pages/SignUpPages';

import ProfilePagesContainer from '../../ui/containers/ProfilePagesContainer';

FlowRouter.route('/', {
  name: 'default.route',
  triggersEnter: [(context, redirect) => {
    if (!Meteor.userId()) {
      redirect('/login');
    } else {
      redirect('/home');
    }
  }],
});

FlowRouter.route('/login', {
  name: 'login.route',
  action() {
    mount(LoginLayout, {
      content: (<LoginPages />),
    });
  },
});

FlowRouter.route('/signup', {
  name: 'signup.route',
  action() {
    mount(LoginLayout, {
      content: (<SignUpPages />),
    });
  },
});

FlowRouter.route('/home', {
  name: 'home.route',
  action() {
    mount(MainLayout, {
      content: (<WelcomePages />),
    });
  },
});

FlowRouter.route('/profile/:username', {
  name: 'profile.route',
  action({ username }) {
    mount(MainLayout, {
      content: (<ProfilePagesContainer pageUsername={username} />),
    });
  },
});

publications.js

import { Meteor } from 'meteor/meteor';
// import { check } from 'meteor/check';

Meteor.publish('userData', function userData() {
  return Meteor.users.find({
    _id: this.userId,
  });
});

// Meteor.publish('user.single', username => {
//   check(username, String);
//   const selector = { username };
//   return Meteor.users.find({ selector }).fetch();
// });

Meteor.publish('all.users', () => Meteor.users.find({}));

ProfilePagesContainer.js

import { Meteor } from 'meteor/meteor';
import { composeWithTracker, composeAll } from 'react-komposer';
import { useDeps } from 'react-simple-di';
import ProfilePages from '../../ui/pages/ProfilePages';

const composer = ({ pageUsername }, onData) => {
  const userProfileHandle = Meteor.subscribe('all.users');
  if (userProfileHandle.ready()) {
    const profileUser = Meteor.users.find({ username: pageUsername }).fetch();
    onData(null, profileUser);
  } else {
    // UI component get a prop called `loading` as true
    onData(null, { loading: true });
  }
};

export default composeAll(
  composeWithTracker(composer),
  useDeps()
)(ProfilePages);

React-Komposer + Flow-Router参数

1 个答案: