React/Javascript，不能访问对象中的字段

React/Javascript, can't access fields in object

本文关键字：对象 字段 访问 不能 Javascript React      更新时间：2023-09-26

我正在React中构建一个组件，并通过props传递一个user对象。在渲染方法中，我调用{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不是一个对象(求值'this.props.user.email')

注意:我在render方法中把console.log(this.props.user)放在return之前。它记录两次日志，一次作为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保存在存储中，但如果用户还不在存储中，我们必须在登录后从数据库中检索它。

我怎么能等到对象在视图中访问它之前?

看起来你两次渲染组件，而第一次没有传递用户对象。

要么让你的组件在没有数据的情况下工作，要么在没有数据可用的情况下不渲染它。后者更可取。所有这些都是基于组件在用户数据可用时呈现的假设。

假设该组件由另一个组件组成，您可以在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。

相关文章：