我尝试根据所选的 国家/地区 填充 州/地区 。 我收到如下所示的错误

服务、操作和 Reducer 均正常运行。我收到了来自操作的响应。 以下是代码

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.handleChange(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.handleChange(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)
  }
});

此目的只有一个页面。 如何更改我的代码以避免此错误？ 是否与状态和道具有关？