잡히지 않은 ReferenceError : RoleLength가 Role.render에 정의되지 않았습니다.

Question

안녕하세요. 반응 렌더링에 도움이 필요합니다. 처음/roles로 갈 때 const roleLength = this.props.roles.length> 0; 여전히 정의되어 있습니다. 그러나 내가 만들어 내가/역할에 제출 한 후/addRole에 경로를 다시 할 때 포착되지 않은 오류 ReferenceError : 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()와 관련이 있는지 궁금합니다. 제안 및 답변을 높이 평가드립니다. 당신에게

PS 감사 : 데이터 this.props.roles 자체가 정의 될 수 있기 때문에 오류가 발생할 수

Answer 1

불구하고 만들었습니다. 시도해보십시오

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