React/Javascript，无法访问对象中的字段

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 is not an object (evaluating 'this.props.user.email')

注意：我在render方法中的return前放了一个console.log(this.props.user)。它记录两次，一次 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>
);

请注意，其中 none 是 React 或 JSX 特定的。您在这里所做的就是决定（使用标准 JavaScript）传递哪个值：React 组件或 null.

React/Javascript，无法访问对象中的字段

React/Javascript, can't access fields in object

javascript

render

key

promise

reactjs