Question

我正在React中构建一个组件，并通过props传递user个对象。在render方法中，我调用{this.props.user}并在视图中将5huttotw@gmail.comhuttotwHello, world!作为字符串返回，这是预期的（我想）。但是，我无法访问对象中的this.props.user.email或任何其他字段。

当对象输出到控制台时，它看起来像这样：

Object
 bio: "Hello, world!"
 email: "huttotw@gmail.com"
 first_name: ""
 id: 5
 last_name: ""
 username: "huttotw"
 Object Prototype

字段在那里，但当我尝试访问其中一个时，我得到了

TypeError：null不是对象（评估＆＃39; this.props.user.email＆＃39;）

注意：我在console.log(this.props.user)方法的return之前添加了render。它会记录两次，一次null，一次记录为Object。

我的渲染方法：

render() {
        console.log(this.props.user); // Outputs null then the Object
        return (
            <div className="row">
                <div className="col-sm-offset-3 col-sm-6">
                    <div className="panel panel-primary">
                        <div className="panel-body">
                            <h3>Congratulations!</h3>
                            <ul>
                                <li>Your token is: <strong>{this.props.token.access_token}</strong></li>
                                <li>Your refresh token is: <strong>{this.props.token.refresh_token}</strong></li>
                                <li>Your scope is: <strong>{this.props.token.scope}</strong></li>
                                <li>Your token expires in: <strong>{this.props.token.expires_in}</strong></li>
                            </ul>
                            <p>{this.props.user.email}</p> // Type Error null is not an object.
                        </div>
                    </div>
                </div>
            </div>
        );
    }

我对令牌使用相同的策略，但区别在于user对象是API调用的结果，token位于本地存储中。

这两个道具来自AuthenticatedComponent，跟踪tokens和users以了解用户是否已登录。 token和user保存在商店中，但如果用户尚未在商店中，我们必须在登录后从数据库中检索它。

在尝试在视图中访问对象之前，我怎么能等到对象存在？

Answer 1

您似乎正在渲染组件两次，而不是第一次传递用户对象。

使组件在没有数据的情况下工作，或者在没有可用数据的情况下不渲染它。后者是优选的。所有这些都是基于在用户数据可用时呈现组件的假设。

假设此组件由另一个组件组成，您可以使用条件运算符在JSX中轻松完成此操作：

let user = // get user data

return (
  <div>
    // possible other components
    // ...
    {user ?                          // if user is available
       <MyComponent user={user} /> : // render component
       null                          // otherwise render null
    } 
  </div>
);

如果您的逻辑更复杂，请使用if语句：

let user = // get user data
let userComponent = null;

if (user) {
   // whatever other complex logic
   userComponent = <MyComponent user={user} />;
}

return (
  <div>
    // possible other components
    // ...
    {userComponent} 
  </div>
);

请注意，这些都不是React或JSX特有的。您在此处所做的就是（使用标准JavaScript）决定要传递哪个值：一个React组件或null。

React / Javascript，无法访问对象

1 个答案: