Question

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

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

其他类似的问题与功能有关，但在我的情况下是关于访问道具因此.bind（这个）不起作用。

Answer 1

if (this.props.roleDetails.roleName)看起来像roleDetails undefined因为您获取了请求数据，因此如果您尝试访问它的属性roleName，您将获得错误。

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

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

从例如访问时，React无法读取未定义的属性。 IF声明

1 个答案: