未知のReferenceError：RoleLengthがRole.renderで定義されていません

Question

こんにちは私はリアクションレンダリングの助けが必要です。私が最初に/ rolesに行くとき、const roleLength = this.props.roles.length> 0;依然として定義されている。しかし、私は/ロールに捕捉されないにReferenceErrorを提出した後、私が作成し、/ addRoleにルートを再とき：roleLengthはここRole.render

import { getRoles } from '../../actions/roleActions' 
    import { refreshToken } from '../../actions/authActions' 
    import { connect } from 'react-redux' 
    import _ from 'lodash' 
    import { Link } from "react-router" 



    class Role extends React.Component { 
     constructor(props) { 
     super(props); 
     this.state = { 
      roles: [] 
     }; 
     } 

     componentWillMount(){ 
     this.props.getRoles().then(() => { 
      console.log('this role props: ', this.props) 
      if(this.props.errors.code === 'UNAUTHORIZED'){ 
      this.props.refreshToken().then(() => { 
       this.props.getRoles() 
      }) 
      } 
     }) 
     } 

     render(){ 

     const roleArr = _.valuesIn(this.props.roles) 
     const roleLength = this.props.roles.length > 0; 
     return (
      <div> 
      <Link className="add-btn btn btn-success" to="/addRole" ><i className="fa fa-plus"></i>Add Role</Link> 
      <h1>Roles</h1> 
      <table className="table table-responsive table-bordered"> 
       <thead> 
       <tr> 
        <td>Name</td> 
        <td>Created At</td> 
        <td>Action</td> 
       </tr> 
       </thead> 
       <tbody> 
       { roleLength ? (
        roleArr.map((roles, i) => { 
        return (
         <tr key={i}> 
         <td>{roles.name}</td> 
         <td>{roles.createdAt}</td> 
         <td> 
          <Link className="btn btn-sm btn-warning" > 
          <i className="fa fa-pencil"></i> 
          </Link> 
          <button className="btn btn-sm btn-danger"> 
            <i className="fa fa-trash-o"></i> 
          </button> 
         </td> 
        </tr> 
        ); 
       })) : (<tr>No Roles Found</tr>) 
       } 
       </tbody> 
      </table> 
      </div> 
     ); 
     } 
    } 

    Role.propTypes = { 
     getRoles: React.PropTypes.func.isRequired, 
     errors: React.PropTypes.object.isRequired, 
     refreshToken: React.PropTypes.func 
    } 

    Role.contextTypes = { 
     router: React.PropTypes.object.isRequired 
    } 

    function mapStateToProps(state) { 
     return{ 
     roles: state.roleReducer.roles, 
     links: state.roleReducer.links, 
     errors: state.roleReducer.errors 
     } 
    } 

    export default connect(mapStateToProps, { getRoles, refreshToken })(Role) 

で定義されていない、私の役割の追加コードは次のとおりです。

this.props.postRole(this.state).then(() => { 
     if(this.props.errors.message){ 
      this.setState({errors: this.props.errors, isLoading: false}); 
     }else{ 
      this.context.router.push('/roles') 
     } 
     } 
    ); 

私はこれがcomponentWillMount（）と何か関係があるかどうか疑問に思っていた。 あなたの提案と回答は高く評価されています。 this.props.roles自体が不定になることがありますので

Answer 1

エラーが発生する可能性があるものの、データが作成されました：あなたは

PSありがとうございました。試してみてください

render(){ 

    const roleArr = _.valuesIn(this.props.roles) 

    return (
     <div> 
     <Link className="add-btn btn btn-success" to="/addRole" ><i className="fa fa-plus"></i>Add Role</Link> 
     <h1>Roles</h1> 
     <table className="table table-responsive table-bordered"> 
      <thead> 
      <tr> 
       <td>Name</td> 
       <td>Created At</td> 
       <td>Action</td> 
      </tr> 
      </thead> 
      <tbody> 
      { this.props.roles ? (
       roleArr.map((roles, i) => { 
       return (
        <tr key={i}> 
        <td>{roles.name}</td> 
        <td>{roles.createdAt}</td> 
        <td> 
         <Link className="btn btn-sm btn-warning" > 
         <i className="fa fa-pencil"></i> 
         </Link> 
         <button className="btn btn-sm btn-danger"> 
           <i className="fa fa-trash-o"></i> 
         </button> 
        </td> 
       </tr> 
       ); 
      })) : (<tr>No Roles Found</tr>) 
      } 
      </tbody> 
     </table> 
     </div> 
    ); 
    } 
}