javascript - If() block 更改接收到的 Meteor 数据

Question

好的。我无语。两天前我遇到了这种奇怪的行为，我真的不知道发生了什么。

在我的代码中我有:

character: Characters.find({
    'user._id': Meteor.userId(),
    'gameId': this.props.gameId
}).fetch(),

它在 getMeteorData 函数内部(我将 Meteor 与 React 结合使用)，mixin [ReactMeteorData] 也存在。

现在在 componentWillMount() 函数中我有这段代码。我想做的是检查这个用户创建的 Angular 色和这个游戏中是否有 Angular 色。

componentDidMount: function() {
    console.log(this.data.character);
}

它返回 [Class] 以及我正在寻找的字符。伟大的!所以现在我添加这段代码，它看起来像这样:

componentDidMount: function() {
    console.log(this.data.character);

    if (this.data.character.length > 0) {
        console.log('yay!');
    } else {
        console.log('nay...');
    }
}

所以这是一个正常的、不可疑的 if()。猜猜我从第一个 console.log() 中得到了什么:[]。为什么？为什么这个 if 正在改变我从我的数据库中得到的东西？!

Answer 1

问题是当我尝试使用订阅时订阅还没有准备好。我所做的是重写订阅的方式。我将它从路由器(因此那里没有订阅)移动到组件本身。像这样:

data = {}
subs = {}

subs.something = Meteor.subscribe("something", argument);

if (subs.something.ready()) {
    data.something = Somethings.find({}).fetch();
    // the same query I use in publish method but with .fetch()
    // because otherwise Meteor throws a warning
}

这是转到 getMeteorData 函数的代码。然后在 render() 中，我可以像这样使用这些订阅:

render: function() {
    return(
        <p>{this.data.something ? this.data.something.property : 'Loading...'}</p>
    );
}

然后一切正常。我已经重写了所有组件以使用这种做事方式，现在我在订阅方面没有任何问题。它也感觉更“组件化”和“响应式(Reactive)”，因为包括订阅在内的所有内容都包含在父组件中，并且相关数据通过 Prop 传递给子组件。无需在路由器中寻找代码和订阅方式。