时间戳

首页 > 解决方案 > 当我想访问对象详细信息时，React JS 抛出“TypeError：无法读取未定义的属性‘名称’”错误

javascript - 当我想访问对象详细信息时，React JS 抛出“TypeError：无法读取未定义的属性‘名称’”错误

问题描述

当我单击我的用户列表时，我想以模式显示我的用户详细信息。我将用户 ID 作为道具传递给模态，在模态中我通过 javascript find() 方法和 user_id 找到用户。此方法将我请求的用户作为对象返回，我可以通过 console.log() 显示它，但是当我想访问对象属性时，例如“user.name”或“user.email”反应抛出错误：TypeError：不能读取未定义的属性“名称”

//users.js code part

{ showUserDetails ? <div className="ModalContainer" >
       <div className="userModal">
           <div className="modalBody">
               <span className="close">X</span>
               <SelectedUser selectedUserId={selectedUserId}/>
           </div>
       </div>
   </div> : <div></div>
}

// SelectedUser.js codes

import React from 'react';
import { connect } from "react-redux";
import { withRouter } from "react-router-dom";

const SelectedUser = ({selectedUserId, users}) => {
    let user = users.find(user=> user.id === selectedUserId)
    console.log(user.name)
    return ( 
       <React.Fragment>
            <p><b>Name:</b> {user.name}</p>
            <p><b>User Name:</b> {user.username}</p>
            <p><b>Email:</b> {user.email}</p>
            <p>
                <b>Address:</b> 
                {`  ${user.address.suite}, ${user.address.street}, ${user.address.city}
                [zip Code: ${user.address.zipcode}]
                `}
            </p>
            <p><b>Phone: </b>{user.phone}</p>
            <p><b>WebSite: </b>{user.website}</p>
            <p><b>Company: </b>{user.company.name}</p>
       </React.Fragment>
     );
}

const mapStateToProps = state => ({
    users: Object.values(state.users.users)
})


export default withRouter(connect(mapStateToProps)(SelectedUser));

标签： javascriptreactjsreact-redux

解决方案

在 SelectedUser 组件中，您应该在渲染之前检查用户状态是否可用。

import React from 'react';
import { connect } from "react-redux";
import { withRouter } from "react-router-dom";

const SelectedUser = ({selectedUserId, users}) => {
    let user;
    let content;
    if(users && users.length > 0){
        user = users.find(user=> user.id === selectedUserId);
    } else {
        return <div>Loading....</div>
    }

    if(Object.keys(user).length >= 0){
       content = (<React.Fragment>
            <p><b>Name:</b> {user.name}</p>
            <p><b>User Name:</b> {user.username}</p>
            <p><b>Email:</b> {user.email}</p>
            <p>
                <b>Address:</b> 
                {`  ${user.address.suite}, ${user.address.street}, ${user.address.city}
                [zip Code: ${user.address.zipcode}]
                `}
            </p>
            <p><b>Phone: </b>{user.phone}</p>
            <p><b>WebSite: </b>{user.website}</p>
            <p><b>Company: </b>{user.company.name}</p>
       </React.Fragment>)
   } else {
       content = "Loading"
   }
   return(
      <div>{content}</div>
   )
}

const mapStateToProps = state => ({
    users: Object.values(state.users.users)
})


export default withRouter(connect(mapStateToProps)(SelectedUser));

推荐阅读