- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在努力弄清楚如何等待 Meteor.user()
在 react 组件中订阅。我知道用户已登录,因为 Meteor.userId()
返回 _id
,但尝试访问电子邮件地址显示 Meteor.user()
返回未定义。我猜是因为它还没有可用。
唉,由于 Meteor.user() 不是我手动订阅的发布,我不确定如何在 React 组件中等待它。有人可以指出我的例子吗?
import { Meteor } from 'meteor/meteor';
import React from 'react';
import { Link } from 'react-router';
import { createContainer } from 'meteor/react-meteor-data';
import './BaseLayout.scss';
class BaseLayout extends React.Component {
constructor(props) {
super(props);
this.state = {
isAuthenticated: (Meteor.userId() !== null) ? true : false,
}
}
componentWillMount() {
if (!this.state.isAuthenticated) {
this.context.router.push('/login');
}
}
componentDidUpdate(prevProps, prevState) {
if (!this.state.isAuthenticated) {
this.context.router.push('/login');
}
}
toggleUserMenu() {
this.refs.userMenu.style.display = (this.refs.userMenu.style.display === 'block') ? 'none' : 'block';
}
logout(e) {
e.preventDefault();
Meteor.logout();
this.context.router.push('/login');
}
render() {
return(
<div id="base">
<div id="header">
<div id="top-bar" className="clear-fix">
<div className="float-left" id="logo"></div>
<div className="float-right" id="user-menu">
<div onClick={this.toggleUserMenu.bind(this)}>
<span>{this.props.currentUser.emails[0].address}</span>
<div className="arrow-down"></div>
</div>
<div id="user-menu-content" ref="userMenu">
<a onClick={this.logout.bind(this)}>Sign Out</a>
</div>
</div>
</div>
</div>
<div id="bodyContainer">
{this.props.children}
</div>
<div id="footer">
<ul>
<li><a href="mailto:test@example.com">Made by Us</a></li>
</ul>
</div>
</div>
)
}
}
BaseLayout.contextTypes = {
router: React.PropTypes.object.isRequired,
}
export default BaseLayoutContainer = createContainer(() => {
var handle = Meteor.subscribe("user.classrooms");
return {
currentUser: Meteor.user(),
dataLoading: !handle.ready(),
classrooms: Classrooms.find({}).fetch(),
};
}, BaseLayout);
最佳答案
您可以使用三元运算
currentUser ? true : flase
destructure
例如,而不是做
const currentUser = this.props.currentUser
你可以做
const { currentUser } = this.props;
看一看:
render() {
const { currentUser, children } = this.props;
return (
<div id="base">
<div id="header">
<div id="top-bar" className="clear-fix">
<div className="float-left" id="logo"></div>
<div className="float-right" id="user-menu">
<div onClick={this.toggleUserMenu.bind(this)}>
{currentUser ?
<span>{currentUser.emails[0].address}</span> :
<span>Loading...</span>
}
<div className="arrow-down"></div>
</div>
<div id="user-menu-content" ref="userMenu">
<a onClick={this.logout.bind(this)}>Sign Out</a>
</div>
</div>
</div>
</div>
<div id="bodyContainer">
{children}
</div>
<div id="footer">
<ul>
<li><a href="mailto:test@example.com">Made by Us</a></li>
</ul>
</div>
</div>
)
}
关于Meteor/React - 如何等待 Meteor.user(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39560279/
export class UserListComponent implements OnInit{ users; constructor(private userService: UserS
我最近在我的系统中遇到了 Java 语言环境的问题,我试图用这个配置运行一个项目: -Duser.language=pt_BR -Duser.country=BR 谷歌搜索后,我找到了this sit
1 当我希望出现注册错误时,我的代码出现问题:管理器不可用; 'auth.User' 已替换为 'users.User' ,我尝试解决其他问题,与 Manager 不可用相同; 'auth.User'
Loopback 非常酷,但这是我迄今为止遇到的一个缺点,我真的不确定如何解决它。内置用户模型在我的 MongoDB 数据库中生成一个名为“User”的集合,当我尝试根据 Loopback.js 自己
我在 aws cognito 中有以下用户组。行政成员付费成员(member) 我想在所有用户注册我的应用程序时将所有用户默认分配到 Member 用户组,这样我就可以为该用户组分配不同的 IAM A
blogsIndex.blade.php @extends('layouts.default') @section('details')
我正在尝试在Rails 3开发环境中使用sqlite3而不是MySQL,但是遇到了问题。尝试执行rake db:migrate时,我得到: SQLite3::SQLException: no such
尝试使用 构建 API Phoenix v1.3 按照本教程: https://dreamconception.com/tech/phoenix-full-fledged-api-in-five-mi
我正在使用通过模板 cookie-cutter 创建的 Django。当我尝试在本地使用 docker 运行项目时,出现以下错误。 FATAL: password authentication fai
我正在尝试使用 node.js/adonis 创建新用户 我创建了这两个函数: const User = use("App/Models/User") async store ({ request,
我想安排一些事情,例如 GET 请求 http://example.com/user/foo@bar.com 内部调用脚本 /var/www/example.com/rest/user/GET.php
我是一名具有可用性工程背景的软件开发人员。当我在研究生院学习可用性工程时,其中一位教授有一句口头禅:“你不是用户”。我们的想法是,我们需要将 UI 设计基于实际的用户研究,而不是我们自己关于 UI 应
您好,我正在制作一个使用互联网发送消息的消息传递应用程序。我需要从用户 a 向用户 b 发出通知。 我使用这段代码: if (toUser!= nil){ parseMessage[@
在 ruby/ror 中你可以这样做: user = User.new(params[:user]) 它使用发布表单中的值填充新对象。 使用 django/python 可以完成类似的事情吗? 最
每当我编辑用户的角色时,用户都需要注销并重新登录以查看更改。提升用户时没有问题,因为他们在再次登录之前不会看到额外的权限。但是,当降级发生时,用户仍将保留其现有角色,这会带来安全风险。想象一下,撤销一
我的核心数据有线问题。使用 iOS 10 中的 Swift3,每次使用 获取或存储数据时,我都会获得托管对象上下文 func getContext () -> NSManagedObjectCont
我发现当我使用 users_path(user) 时它返回 /users.id 其中 id 是用户的 ID 但我希望它返回 /用户/ID。我的配置 routes.rb 如下所示。 # config/r
我的应用程序在我的测试设备上正常运行(当我通过 ADT 安装它时,当我通过导出的 APK 文件安装它时)但它在 Play Store 测试设备上失败并出现以下错误: Permission Denial
创建模型的第一个条目会抛出错误 我执行了以下命令进行迁移 manage.py makemigrations manage.py migrate 在我执行这些命令以在数据库中创建第一个“数据”之后,一切
我正在尝试实现一个 getter,但它在下面代码 fragment 的最后一行向我显示了这个错误。 代码是—— class AuthRepository extends BaseAuthReposit
我是一名优秀的程序员,十分优秀!