Javascript 流星反应问题闪烁图像-显示已注销然后已登录

更新：重新启动后，它现在可以工作了。但是，它仍然会首先显示已注销的组件，然后显示已登录的组件。为什么这是因为用户登录了我才刷新页面

更新2： 它已经回到了闪烁的注销=>然后它应该是什么，然后再次变成白色，在没有改变后只是重新启动流星

更新3： 所以它可以工作，然后我导航到这个页面，而不是其他页面。这似乎是因为注册页面订阅了items集合，所以它就是这样获取它的。我认为它不应该在更改页面时刷新Box组件，而应该从Box组件本身订阅items集合。此页面通过flow router加载，并输入到站点的内容区域，请参见以下内容：

import Items from '/imports/collections/items/items.js';



export default class Registration extends TrackerReact(React.Component){

    constructor(){
            super();
            this.state = {
                    subscription: {
                            items: Meteor.subscribe("allStarterItems")
                    }
            }
    }

主页位于此处，问题位于LeftNavbar区域内，因为该区域包含以下框：

import React from 'react';
import ReactDOM from 'react-dom';
import TrackerReact from 'meteor/ultimatejs:tracker-react';
import LeftNavbar from './LeftNavbar';

export const MainLayout = ({content}) => (

<div className="main-layout">


        <LeftNavbar />

        <div className="right content-page">
                          <main>
                  {content}
            </main> 

        </div>


</div>
)

从“React”导入React；
从“react dom”导入react dom；
从“meteor/ultimatejs:tracker react”导入TrackerReact；
从“/LeftNavbar”导入LeftNavbar；
导出常量MainLayout=（{content}）=>(
{content}
)

这是左侧导航栏页面：

import React from 'react';
import ReactDOM from 'react-dom';
import TrackerReact from 'meteor/ultimatejs:tracker-react';
import Box from '/imports/ui/left_navbar/Box';

export default class LeftNavbar extends TrackerReact(React.Component){

    constructor(){
     super();   
    }

    render(){       
     return (  
                    <div className="left side-menu">    
                            <div className="body rows scroll-y">    
                                    <div className="sidebar-inner ">
                                            <Box />
                                    </div>
                            </div>
                    </div>   
         ) 
    }
 }

从“React”导入React；
从“react dom”导入react dom；
从“meteor/ultimatejs:tracker react”导入TrackerReact；
从“/imports/ui/left_导航栏/Box”导入框；
导出默认类LeftNavbar扩展TrackerReact（React.Component）{
构造函数（）{
超级（）；
}
render（）{
报税表（
) 
}
}

---

大家好，我的项目有问题

我有一个区域，我有一个堆叠的图像堆叠在彼此的顶部，并被覆盖。我知道css等工作，因为我在另一个页面上，只是没有从数据库加载它

此处是检查用户是否登录以决定渲染哪个组件的文件：

import React from 'react';
import ReactDOM from 'react-dom';
import TrackerReact from 'meteor/ultimatejs:tracker-react';
import BoxSignedIn from     '/BoxSignedIn';
import BoxSignedOut from '/BoxSignedOut';


 export default class Box extends TrackerReact(React.Component){

    constructor(){
     super();   
    }



    render(){
        var layout;
        if (Meteor.user()) {
            layout = <BoxSignedIn />;
        } else {
            layout = <BoxSignedOut />;
        }


     return (   
                layout                          
            ) 

    }
}

从“React”导入React；
从“react dom”导入react dom；
从“meteor/ultimatejs:tracker react”导入TrackerReact；
从“/BoxSignedIn”导入BoxSignedIn；
从“/BoxSignedOut”导入BoxSignedOut；
导出默认类框扩展TrackerResact（React.Component）{
构造函数（）{
超级（）；
}
render（）{
var布局；
if（Meteor.user（））{
布局=；
}否则{
布局=；
}
报税表（
布局
) 
}
}

这是加载的组件。但是，当我重新加载页面时，它会在一瞬间显示已注销的组件，然后什么也不显示。在页面的源代码中，它没有显示来自图像的src。在控制台中，有时显示2个图像源，有时显示3个

import React from 'react';
import ReactDOM from 'react-dom';
import TrackerReact from 'meteor/ultimatejs:tracker-react';
import Items from '/imports/collections/items/items.js';



export default class BoxSignedIn extends TrackerReact(React.Component){

    constructor(){
        super();
        this.state = {
                subscription: {
                        items: Meteor.subscribe("allStarterItems")
                },
                layers: {
                    layer1: Meteor.user().profile.layer.1,
                    layer2: Meteor.user().profile.layer.2,
                    layer3: Meteor.user().profile.layer.3
                }
        }
    }


    componentWillUnmount(){
        this.state.subscription.items.stop();
    }



    getItemSource(itemKey){


        var itemer = Items.findOne({key: itemKey});
        if(!itemer){
                return "";
        }else{
                console.log(itemer.srcEntire); // shows src correctly
                return itemer.srcEntire;
        }
    }


    render(){   

     return (   

        <div className="media"  >
                <div className="Area">
                    <div className="container-on-top box-small" >
                        <img id="layer1" className="on-top img-responsive center-block on-top" name="layer1" src={this.getItemSource(this.state.layers.layer1)} />
                        <img id="layer2" className="on-top img-responsive center-block on-top" name="layer2" src={this.getItemSource(this.state.layers.layer2)} />
                        <img id="layer3" className="on-top img-responsive center-block on-top" name="layer3" src={this.getItemSource(this.state.layers.layer3)} />

                    </div>
                </div>
            </div>    

            ) 
    }
}

从“React”导入React；
从“react dom”导入react dom；
从“meteor/ultimatejs:tracker react”导入TrackerReact；
从“/imports/collections/Items/Items.js”导入项目；
导出默认类BoxSignedIn扩展TrackerReact（React.Component）{
构造函数（）{
超级（）；
此.state={
订阅：{
项目：Meteor.subscribe（“所有项目”）
},
图层：{
layer1:Meteor.user（）.profile.layer.1，
第二层：Meteor.user（）.profile.layer.2，
第三层：Meteor.user（）.profile.layer.3
}
}
}
组件将卸载（）{
this.state.subscription.items.stop（）；
}
getItemSource（itemKey）{
var itemer=Items.findOne（{key:itemKey}）；
如果（！itemer）{
返回“”；
}否则{
console.log（itemer.srcpother）；//正确显示src
返回itemer.src；
}
}
render（）{
报税表（
) 
}
}

在这里面临同样的问题。您正在渲染服务器端吗？与flow router ssr类似？不，不渲染服务器端。我是Meteor的新手，所以到目前为止还没有研究过服务器端渲染。不确定这是否对您有帮助，但是在那里添加Meteor.logging（）方法怎么样。当检查用户是否登录的逻辑运行时，登录似乎尚未完成。您可以检查Meteor.loggingIn（）是否已登录，如果已登录，则显示加载，如果未登录，则检查他们是否已登录。此处面临相同的问题。您正在渲染服务器端吗？与flow router ssr类似？不，不渲染服务器端。我是Meteor的新手，所以到目前为止还没有研究过服务器端渲染。不确定这是否对您有帮助，但是在那里添加Meteor.logging（）方法怎么样。当检查用户是否登录的逻辑运行时，登录似乎尚未完成。您可以检查Meteor.loggingIn（）是否已登录，如果已登录，则显示加载，如果未登录，则检查他们是否已登录。