Ant Design报Cannot use 'in' operator to search for 'value' in undefined错误的一种情形

悠悠 2021-09-22 23:44 1342阅读 0赞

报错的地方，是用在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});
     }