reactjs - render() 中的 Meteor handle.ready() 不触发组件的重新渲染

Question

我的渲染方法中有以下代码:

 render() {
    return (
        <div>
                {this.props.spatulaReady.ready() ? <p>{this.props.spatula.name}</p> : <p>loading spatula</p>}
        </div>
    )
}

根据我的理解，检查订阅句柄是否准备好(数据在那里)并显示它。如果没有可用数据，它应该显示一条简单的加载消息。但是，当我第一次加载此代码片段所在的页面时，它会卡在加载部分。在页面重新加载时，数据(通常)显示良好。

如果我在页面首次加载时检查 spatulaReady.ready() ，并且当显示卡在“正在加载抹刀”上时，以及应该在那里的数据，则句柄报告已准备好并且数据就在那里应该是。如果我刷新页面，它也会显示得很好。问题是，这种检查数据并渲染数据(如果数据已到达)的方法过去对我来说效果很好。是因为 render 方法不是响应式的吗？因为handle.ready()应该是 react 性的。

更奇怪的是，它有时确实在页面加载时正确显示数据，看似随机。

创建容器代码:

export default createContainer(props => {
    return {
        user: Meteor.user(),
        spatulaReady: Meteor.subscribe('spatula.byId', props.deviceId),
        spatula: SpatulaCollection.findOne()
    }
}, SpatulaConfig)

发布代码:

Meteor.publish('spatula.byId', function(deviceId) {
    const ERROR_MESSAGE = 'Error while obtaining spatula by id'

    if (!this.userId) //Check for login
        throw new Meteor.Error('Subscription denied!')
    const spatula = SpatulaCollection.findOne({_id: deviceId})
    if(!spatula) //No spatula by this id
        throw new Meteor.Error(403, ERROR_MESSAGE)
    if(spatula.ownedBy != this.userId) //Spatula does not belong to this user
        throw new Meteor.Error(403, ERROR_MESSAGE)

    return SpatulaCollection.find({_id: deviceId})

})

我知道我在这里遗漏了一 block 拼图，但我一直没能找到它。如果您不知道我的具体问题的解决方案，也非常感谢您通过另一种在显示数据之前等待数据到达的方式为我指明正确的方向。

编辑:经过一些反复试验并阅读与我的项目有些相关的其他各种帖子后，我找到了解决方案:

export default createContainer(props => {
    const sHandle= Meteor.subscribe('spatula.byId', props.deviceId)
    return {
        user: Meteor.user(),
        spatulaReady: sHandle.ready(),
        spatula: SpatulaCollection.findOne()
    }
}, SpatulaConfig)

尽管将 read() 调用移动到创建容器解决了我的所有问题，但对我来说仍然毫无意义。

Answer 1

正如您所发现的，将 .ready() 调用移至 createContainer 可以解决问题。这是因为 Meteor react 性仅在您调用 react 性数据源( react 性函数)时起作用，例如 collection.find() 或 subscriptionHandle.ready() 响应式(Reactive)上下文内，例如Tracker.autorun或createContainer。从 Meteor 的角度来看，React 组件中的函数(包括渲染)不是响应式(Reactive)上下文。

请注意，React 和 Meteor react 性是两个不同的东西。 React 的 react 性工作原理很简单，只要组件的 props 或 state 发生变化，它的 render 函数就会重新运行。它不了解 Meteor 的 react 数据源的任何信息。由于 createContainer (当其中的 react 性数据源发生变化时，由 Meteor react 性重新运行)只是将 props 传递给底层组件，因此当组件发生变化时，React 会重新渲染该组件createContainer 给出的 props 发生变化。