javascript - 从例如访问时，React 无法读取未定义的属性IF 语句

Question

Redux 将我的应用程序状态转换为 props，并且我想在 API 请求完成后访问某些 props 的属性。然而，当我收到上述消息时，我的页面无法呈现。

开始 GET 请求:

componentWillMount() {
  this.props.renderRoles(this.props.params.roleID);
};

渲染用户确实有效:

renderUsers(){
  return this.props.roleDetails.userList.map((user)=>{
    return(
    <li className='list-group-item eventUserList' background-color="#f2f2f2" key={user._id}>
      {user.userName}
    </li>
      );
     });
   };

  render() {

    const { handleSubmit, fields: {} } = this.props;

这是问题部分。不知何故，如果我查找 this.props 的属性，它们的属性就会变得未定义:

    if (this.props.roleDetails.roleName){
    return (

如果我只查找 this.props.roleDetails，它确实有效，但在查找其属性时则无效:

    if (this.props.roleDetails){
    return (


  <div className='container-fluid'>
  <form>
    <div className="roleDetails">
      <div className="roleName">
      {this.props.roleDetails.roleName}
      </div>
    </div>
    <div className="roleUsers">
      <div className="userDetails">
      <h4 className="listOfUsers">Role Owner :</h4>
      <ul>
      {this.renderUsers()}
      </ul>
      </div>
    </div>
    <div>
        <div className="submitRole" onClick={this.submitForRole.bind(this)}>Apply</div>
    </div>
    </form>
    </div>
    );
}else {
  return (
    <div>
    </div>
  );
}
  }
}



function mapStateToProps(state) {
return{
  roleDetails: state.api.roleDetails,
  refreshedRole: state.api.refreshedRole
}
}

export default reduxForm({
  form: 'roleView',
  fields: []
}, mapStateToProps, actions)(roleView);

其他类似的问题与函数相关，但在我的例子中是关于访问 props 因此 .bind(this) 不起作用。

Answer 1

if (this.props.roleDetails.roleName) 看起来像 roleDetails undefined 在您通过请求获取数据之前，所以如果您尝试要访问它的属性roleName，您将收到错误。

if (this.props.roleDetails && this.props.roleDetails.roleName) 不应抛出错误。

在 componentWillMount 中获取数据并不是一个好主意，请改用 componentDidMount。