React中使用Ant框架遇到的问题

使用Form表单中的getFieldDecorator进行双向绑定时出现的问题

代码中遇到的问题是配偶基本情况部分的数据无法反显，排查发现是 getFieldDecorator 的绑定出现了问题

import React, { Component } from 'react';
import { Form, Input, Row, Col, Card, InputNumber, Divider, Select } from 'antd';
import { Dict } from 'yrantd';
import { getDictList } from '@/utils/utils';

const { Option } = Select;
class BasicInformation extends Component {
  componentDidMount() {
    getDictList(['marriage_status','job_position']).then(() => {
      this.forceUpdate();
    });
  }

  render() {
    const { form, pageType } = this.props;
    const marriageIf = form.getFieldValue('marriageStatus')
    return (
      <>
        <Divider orientation="left">申请人基本信息</Divider>
        <Row type="flex" justify="space-between">
          <Col span={6}>
            <Form.Item label="姓名" colon={false}>
              {form.getFieldDecorator('clientName', {})(<Input placeholder="请输入" disabled />)}
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item label="性别" colon={false}>
              {form.getFieldDecorator('sex', {})(
                <Select style={{ width: '100%' }} disabled>
                  <Option value="1">男</Option>
                  <Option value="2">女</Option>
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item label="证件及号码" colon={false}>
              {form.getFieldDecorator('certificateNo', {})(<Input placeholder="请输入" disabled />)}
            </Form.Item>
          </Col>
        </Row>
        <Row type="flex" justify="space-between">
          <Col span={6}>
            <Form.Item label="婚姻状况" colon={false}>
              {form.getFieldDecorator('marriageStatus', {})(<Dict.Select disabled dictkey="marriage_status" style={{ width: '100%' }} />)}
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item label="居住地址" colon={false}>
              {form.getFieldDecorator('address', {})(<Input placeholder="请输入" disabled />)}
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item label="户籍地址" colon={false}>
              {form.getFieldDecorator('censusAddress', {})(<Input placeholder="请输入" disabled />)}
            </Form.Item>
          </Col>
        </Row>
        <Row type="flex" justify="space-between">
          <Col span={6}>
            <Form.Item label="客户类型" colon={false}>
              {form.getFieldDecorator('clientType', {})(
                <Select style={{ width: '100%' }} placeholder="请选择">
                  <Option value="1">优质客户</Option>
                  <Option value="2">一般客户</Option>
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item label="工作单位/经营主体" colon={false}>
              {form.getFieldDecorator('companyName', {})(<Input placeholder="请输入" disabled />)}
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item label="现任职务" colon={false}>
              {form.getFieldDecorator('currentPosition', {})(<Dict.Select disabled dictkey="job_position" style={{ width: '100%' }} />)}
            </Form.Item>
          </Col>
        </Row>
        <Row type="flex" justify="space-between">
          <Col span={6}>
            <Form.Item label="工作年限" colon={false}>
              {form.getFieldDecorator('workingYears', {})(<Input placeholder="请输入" disabled />)}
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item label="个人年收入" colon={false}>
              {form.getFieldDecorator(`annualIncome`, {})(<InputNumber placeholder="请输入" disabled style={{ width: '100%' }} precision={2} />)}
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item label="固定电话" colon={false}>
              {form.getFieldDecorator('companyTelephone', {})(<Input placeholder="请输入" disabled />)}
            </Form.Item>
          </Col>
        </Row>
        <Row type="flex" justify="space-between">
          <Col span={6}>
            <Form.Item label="手机号码" colon={false}>
              {form.getFieldDecorator('telephone', {})(<Input placeholder="请输入" disabled />)}
            </Form.Item>
          </Col>
        </Row>
        {form.getFieldDecorator('wife.clientName', {initialValue: '',})(<span />)}
        {form.getFieldDecorator('wife.certificateNo', {initialValue: '',})(<span />)}
        {form.getFieldDecorator('wife.mateDwellAddress', {initialValue: '',})(<span />)}
        {form.getFieldDecorator('wife.mateAnnualIncome', {initialValue: 0,})(<span />)}
        {form.getFieldDecorator('wife.mateCompanyName', {initialValue: '',})(<span />)}
        {form.getFieldDecorator('wife.presentOccupation', {initialValue: '',})(<span />)}
        {form.getFieldDecorator('wife.workUnitNo', {initialValue: '',})(<span />)}
        {form.getFieldDecorator('wife.mateTelephone', {initialValue: '',})(<span />)}
        {marriageIf === '20' ?
          <>
            <Divider orientation="left">配偶基本情况</Divider>
            <Row type="flex" justify="space-between">
              <Col span={6}>
                <Form.Item label="姓名" colon={false}>
                  {form.getFieldDecorator('wife.clientName', {})(<Input placeholder="请输入" disabled />)}
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="证件及号码" colon={false}>
                  {form.getFieldDecorator('wife.certificateNo', {})(<Input placeholder="请输入" disabled />)}
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="居住地址" colon={false}>
                  {form.getFieldDecorator('wife.mateDwellAddress', {})(<Input placeholder="请输入" disabled={pageType === 'look'} />)}
                </Form.Item>
              </Col>
            </Row>
            <Row type="flex" justify="space-between">
              <Col span={6}>
                <Form.Item label="个人年收入" colon={false}>
                  {form.getFieldDecorator('wife.mateAnnualIncome', {})(<InputNumber min={0} placeholder="请输入" disabled={pageType === 'look'} style={{ width: '100%' }} precision={2} />)}
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="工作单位/经营主体" colon={false}>
                  {form.getFieldDecorator('wife.mateCompanyName', {})(<Input placeholder="请输入" disabled />)}
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="现任职务" colon={false}>
                  {form.getFieldDecorator('wife.presentOccupation', {})(<Dict.Select disabled dictkey="job_position" style={{ width: '100%' }} />)}
                </Form.Item>
              </Col>
            </Row>
            <Row type="flex" justify="space-between">
              <Col span={6}>
                <Form.Item label="工作单位电话" colon={false}>
                  {form.getFieldDecorator('wife.workUnitNo', {})(<Input placeholder="请输入" disabled={pageType === 'look'} />)}
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="手机号码" colon={false}>
                  {form.getFieldDecorator('wife.mateTelephone', {})(<Input placeholder="请输入" disabled />)}
                </Form.Item>
              </Col>
              <Col span={6}> </Col>
            </Row>
          </>
          : null}
      </>
    );
  }
}

export default BasicInformation;

代码中配偶基本情况的内容是根据 marriageIf(婚否) 进行判断是否显示,在判断之前getFieldDecorator无法将配偶的信息进行双向绑定，从父级form获取数据的时候无法得到配偶部分的数据，配偶的信息在判断完成之后为undefined，解决方法是在判断之前对配偶的信息提前绑定，如：

        {form.getFieldDecorator('wife.clientName', {initialValue: '',})(<span />)}
        {form.getFieldDecorator('wife.certificateNo', {initialValue: '',})(<span />)}
        {form.getFieldDecorator('wife.mateDwellAddress', {initialValue: '',})(<span />)}
        {form.getFieldDecorator('wife.mateAnnualIncome', {initialValue: 0,})(<span />)}
        {form.getFieldDecorator('wife.mateCompanyName', {initialValue: '',})(<span />)}
        {form.getFieldDecorator('wife.presentOccupation', {initialValue: '',})(<span />)}
        {form.getFieldDecorator('wife.workUnitNo', {initialValue: '',})(<span />)}
        {form.getFieldDecorator('wife.mateTelephone', {initialValue: '',})(<span />)}
        {marriageIf === '20' ?
          <>