reactjs - TypeError：无法读取 React JS 中未定义的属性“长度”以获取国家/地区状态下拉列表

Question

我正在尝试根据所选Country填充State。我收到如下所示的错误

Service、Action 和 Reducer 工作正常。我收到了 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.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)
  }
});

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

标签： reactjsdrop-down-menureduxantd

Answer 1

像这样检查

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