反应auth渲染不同的视图闪烁

Question

下面的代码有什么问题吗？我有闪烁问题，它会在进入AdminArea之前首先呈现userArea。

render(){

        const isAdmin = this.props.role === 'admin' ? true : false

        return(
            <div>
                {isAdmin ? <AdminArea /> : <UserArea />}
                {this.logout()}
            </div>
        )
    }

Answer 1

该代码看起来很好。如果UserArea正在渲染，那是因为“角色”道具最初不是“管理员”。

您可以通过控制台在渲染中记录“角色”道具来观察此情况。最初的“角色”道具值应该可以帮助您追踪问题。

根据我的经验，闪烁通常是最初未加载的用户数据。加载后，预期的道具就在那里。我怀疑你在这里可能有同样的问题。如果是这种情况，请通过设置userLoaded prop来避免闪烁，并在userLoaded为true时呈现此组件。 userLoaded && <ThisComponent />