当我想访问对象详细信息时，React JS引发“ TypeError：无法读取未定义的属性'名称'”错误

Question

I want to show my users details in modal when I click on my users list. I pass the user ID as props to modal and in modal I find the user by javascript find() method and user_id. this method returns my requested user as an Object and I can show it by console.log() but when I want to access to object properties for example "user.name" or "user.email" react thrown an error: TypeError: Cannot read property 'name' of undefined

//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));

Answer 1

In your SelectedUser component you should check if the users-state is available before rendering.

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));