Ошибка типа: не удается прочитать свойство 'длина' из неопределенного в React JS для раскрывающегося списка состояния страны

Question

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

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

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

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

Answer 1

когда вы делаете

this.setState ({selectedCountry: e.target.value})

Вы удаляете все, что вы определили в конструкторе, я думаю, вы должны сначала подготовить данные, а затем обновить все состояние за 1 ход:

    handleSelect = (e) => {
       const selectedStateList = this.props.stateList.filter(stateData => stateData.Country == filterStr)
 this.setState({selectedCountry: e.target.value, selectedStateList});
      }

и последнее, никогда не устанавливайте состояние напрямую, как вы:

this.state.selectedStateList = .....

Answer 2

Проверьте, как это

{this.state.selectedStateList && this.state.selectedStateList.length && this.state.selectedStateList.map((value,index)=>(
                      <option value={value.StateID} key={index}>{value.StateName}</option>
                    ))}

и убедитесь, что у вас есть правильные значения в состоянии

Также убедитесь, что вы connect свой компонент с mapStateToProps

Обновление

Попробуйте это в handleSelect

//this.setState({selectedCountry: e.target.value}) 
var filterStr = e.target.value  == "1" ? 'Canada' : 'USA';      

let selectedStateList = this.props.stateList.length && 
this.props.stateList.filter(stateData => stateData.Country == filterStr)

this.setState({selectedCountry: e.target.value, selectedStateList : selectedStateList });