Ant Design報Cannot use 'in' operator to search for 'value' in undefined錯誤的一種情形

報錯的地方,是用在getFieldDecorator中,Ant Design版本2.9.0,大致jsx代碼如下:

let labelOption = (<Select defaultValue={null} style={{width: 200}} placeholder="請選擇">
    <Option value={null}>全部</Option>
    <Option value={1}>徵信輕微不良</Option>
    <Option value={2}>失信被執行</Option>
    <Option value={3}>企業信息變更</Option>
    <Option value={4}>我司貸款輕微不良</Option>
    <Option value={5}>訴訟執行中</Option>
    <Option value={6}>90天未下單</Option>
    <Option value={7}>其他</Option>
    <Option value={-1}>無</Option>
</Select>);
<Col span={8}>
    <FormItem  label="標籤">
        {getFieldDecorator('label')(
            {labelOption}
        )}
    </FormItem>
</Col>

前端啓動之後,報如題錯誤:

TypeError: Cannot use 'in' operator to search for 'value' in undefined
    at eval (createBaseForm.js:175)
    at DealerAccessNotPassList.render (dealerAccessNotPassList.jsx:331)
    at eval (ReactCompositeComponent.js:796)
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:795)
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:822)
    at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:746)
    at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:724)
    at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:645)
    at ReactCompositeComponentWrapper.performUpdateIfNecessary (ReactCompositeComponent.js:561)

修改爲:

<Col span={8}>
    <FormItem  label="標籤">
        {getFieldDecorator('label')(
            <div>{labelOption}</div>
        )}
    </FormItem>
</Col>

不會再報上述錯誤,但是getFieldDecorator拿不到form中label的值。

無奈,只得在Select組件的onChange中給form中的label賦值,如下:

handleLabelChange =(value)=> {
     console.log(`selected ${value}`);
    this.props.form.setFieldsValue({label:value});
 }

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章