Question

我正在尝试使用React Komposer加载数据，我不确定我做错了什么，非常确定这是应该的方式，除非我错过了什么。但是我没有在UI中获取任何数据。可以使用帮助

container.js

import { composeWithTracker } from 'react-komposer';
import RightNavBar from './right-nav-bar.jsx';

function composer(props, onData) {
    const subscription = Meteor.subscribe('currentUser');
    const currentUser = 'bbbb';
    onData(null, currentUser);
}
export default composeWithTracker(composer)(RightNavBar);

我的组件

export class RightNavBar extends React.Component {
    render() {
        return (
            <div>
                aaaa {currentUser}
            </div>
        );
    }
}

Answer 1

以下是react-komposer's repository的“标准”示例（适合您的具体情况）

function composer(props, onData) {
  const subscription = Meteor.subscribe('currentUser');
  if (subscription.ready()) {
    const currentUser = Meteor.user(); //or whatever
    onData(null, {currentUser});
  };
};

在此订阅，订阅准备就绪后，您的组件将被呈现。否则，将呈现loading组件。

onData的第二个参数应该是一个对象。它与传递给您的组件的其他props合并，可以通过this.props从您的组件中访问。

在您的组件中，props对象可通过this.props获取，因此您可以解构它或直接访问其属性。

class RightNavBar extends React.Component {
  render() {
    const {currentUser} = this.props;
    return (
      <div>
        Hello, {currentUser.name}!
      </div>
    );
  }
}

您的代码发送的是字符串而不是对象，而React无法从您的组件中理解令牌currentUser。

使用React Komposer加载流星数据

1 个答案: