Javascript 反应JS“扔”；TypeError:无法读取属性'；名称'；“未定义”的定义；要访问对象详细信息时出错

当我点击我的用户列表时，我想在模式中显示我的用户详细信息。 我将用户ID作为道具传递给modal，在modal中，我通过javascript find（）方法和user_ID找到用户。 此方法将请求的用户作为对象返回，我可以通过console.log（）显示它，但当我想访问对象属性（例如“user.name”或“user.email”）时，会抛出一个错误： TypeError:无法读取未定义的属性“name”

//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>
}

//users.js代码部分
{showUserDetails？
X
: 
}

//SelectedUser.js代码
从“React”导入React；
从“react redux”导入{connect}；
从“react router dom”导入{withRouter}；
const SelectedUser=（{selectedUserId，users}）=>{
让user=users.find（user=>user.id==selectedUserId）
console.log（user.name）
报税表（
名称：{user.Name}

用户名：{User.username}

电子邮件：{user.Email}


地址:
{`${user.address.suite}，${user.address.street}，${user.address.city}
[邮政编码：${user.address.zipcode}]
`}

电话：{user.Phone}

网站：{user.WebSite}

公司：{user.Company.name}

);
}
常量mapStateToProps=状态=>({
用户：Object.values（state.users.users）
})
使用路由器导出默认值（connect（MapStateTops）（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));

从“React”导入React；
从“react redux”导入{connect}；
从“react router dom”导入{withRouter}；
const SelectedUser=（{selectedUserId，users}）=>{
让用户；
让内容；
if（users&&users.length>0）{
user=users.find（user=>user.id==selectedUserId）；
}否则{
返回加载。。。。
}
if（Object.keys（user.length>=0）{
内容=(
名称：{user.Name}

用户名：{User.username}

电子邮件：{user.Email}


地址:
{`${user.address.suite}，${user.address.street}，${user.address.city}
[邮政编码：${user.address.zipcode}]
`}

电话：{user.Phone}

网站：{user.WebSite}

公司：{user.Company.name}

)
}否则{
content=“加载”
}
返回(
{content}
)
}
常量mapStateToProps=状态=>({
用户：Object.values（state.users.users）
})
使用路由器导出默认值（connect（MapStateTops）（SelectedUser））；

是否在填充redux存储之前呈现

SelectedUser

组件？@Saeid！刚刚给你写了一封信，如果对你有帮助，请告诉我。：）@Christophengo，对不起Chris，我在过去几天遇到了麻烦…@SaeidBarzegar whatsup friend？我测试了你的解决方案。。。但它不起作用。。。主要问题是组件可以找到用户，我可以在控制台中看到它，找到的用户信息类型是object（typeOf（））。。。。但是当我想看到属性应用程序返回空值！！！令人惊叹的！别担心，让我知道这对你是否有效。你认为问题在于find（）方法的输出吗？哦，是的，当然，我不知道我的解决方案出了什么问题哈哈。让我帮你更新。@SaeidBarzegar好的，试试看，如果你有任何错误，请告诉我。

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