TypeError: невозможно прочитать свойство length of undefined в React JS для раскрывающегося списка страны

Я пытаюсь заполнить Состояние на основе выбранного Страна. Я получаю сообщение об ошибке, как показано ниже

Сервис, Действие и Редуктор работают правильно. Я получаю ответ от Action. Ниже приведен код

constructor(props) {
    super(props)
    this.state = {
      CompanyName: '',
      country:'', 
      statez:'',
      selectedStateList: []
    }
  }
componentWillMount(){
    this.props.actions.company.StateList();
  }

handleSelect = (e) => {
    this.setState({selectedCountry: e.target.value}) 
    var filterStr = e.target.value  == "1" ? 'Canada' : 'USA';      
    this.state.selectedStateList = this.props.stateList.length && this.props.stateList.filter(stateData => stateData.Country == filterStr)

  }
render() {
return (
Form onSubmit = {this.handleSubmit} className = "gx-signin-form gx-form-row0">
                <Row gutter = {24}>
                  <Col span = {12}>
                    <FormItem label = "Business Name">
                      {getFieldDecorator('CompanyName', {
                        initialValue: this.state.CompanyName,
                        rules: [{
                          required: true, message: 'Please Input Your Business Name!',
                        }],
                      })(
                        <Input name='CompanyName' placeholder = "Business Name"
                          onChange = {(e) => {
                            e.preventDefault(); e.stopPropagation();
                            this.handleChangeEvent(e)
                          }}
                        />
                      )}

                    </FormItem>


                </Row>



                <Row gutter = {24}>
                  <Col span = {12}>
                    <FormItem label = "Business Address">
                      {getFieldDecorator('Address', {
                        initialValue: this.state.Address,
                        rules: [{
                          required: true, message: 'Please Input Business Address!',
                        }],
                      })(
                        <Input name='Address' placeholder = "Business Address"
                          onChange = {(e) => {
                            e.preventDefault(); e.stopPropagation();
                            this.handleChangeEvent(e)
                          }}
                        />
                      )}

                    </FormItem>

                  </Col>

                </Row>
                <Row gutter = {24}>
                <Col span = {12}>
                            <FormItem label = "Country">
                  {getFieldDecorator('Country', {
                    initialValue: "",
                    rules: [{
                       //required: this.props.isEdit == false ? true : false, message: 'Please Select Your Country!', 
                    }],
                  })(
                    <select  style = {{'width':'245px','height':'32px'}}  onChange = {this.handleSelect} >
                      <option value='0'>Select Country</option>
                      <option value='1'>Canada</option>
                      <option  value='2'>USA</option> 
                    </select>
                  )}

                </FormItem>
                </Col>


                </Row>
                <Row gutter = {24}>
                <Col span = {12}>
                            <FormItem label = "State">
                  {getFieldDecorator('State', {
                    initialValue: "",
                    rules: [{
                      /* required: this.props.isEdit == false ? true : false, message: 'Please Select Your State!', */
                    }],
                  })(
                    <select value = {'StateID'} style = {{'width':'245px','height':'32px'}}>
                   {this.state.selectedStateList.length && this.state.selectedStateList.map((value,index)=>(
                      <option value = {value.StateID} key = {index}>{value.StateName}</option>
                    ))}


                    </select>
                  )}

                </FormItem>
                </Col>

                <Row>
                  <Col span = {24}>
                    <FormItem>
                      <Button type = "primary" className = "gx-mb-0" htmlType = "submit">
                        Sign Up
                    </Button> Or Already Have One <Link to='/signin'> Sign In </Link>
                    </FormItem>
                  </Col>
                </Row>
              </Form>
)
} 

const mapStateToProps = (state) => {
  return {
    stateList:state.companyReducer.stateList || []
  }
};

const mapDispatchToProps = dispatch => ({
  actions: {
    company: bindActionCreators(companyAction, dispatch)
  }
});

Для этой статьи есть только одна страница. Как изменить свой код, чтобы избежать этой ошибки? Это что-нибудь с состоянием и реквизитом?