antd中如何给form表单做数据的返显

在使用Ant-DesignUI库中的Form组件时，怎样在编辑页面时将之前保存过的数据返显在页面？
思路：
1、在componentDidMount生命周期中调用api获取后台数据；
2、通过form的setFieldsValue()方法将后台数据绑定到Form表单控件中。

注意：使用 getFieldsValue， getFieldValue， setFieldsValue 等时，应确保对应的 field 已经用 getFieldDecorator 注册过了。

页面展示如下：

实际代码如下：
index.jsx文件，

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import Link from 'umi/link';
import { Form, Input, Button, Row, Col, message, Card} from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import router from 'umi/router';
import styles from './index.less';
// 设置input框的label以及input框的占比
const formItemLayout = {
  labelCol: {span: 9},
  wrapperCol: {span: 15}
};
// 绑定全局state
@connect(state => {
  return {
    submitting:state.loading.models.getCompanyInfo,
    getCompanyInfo: state.getCompanyInfo
  }
})
// 通过Form.create()包装组件，获取form的api
@Form.create()
export default class extends PureComponent {
  //通过form.setFieldsValue将数据绑定到各个Form表单控件上，这里定义了返显的方法。
  setBaseInfo = (data) => {
    const { form } = this.props;
    Object.keys(form.getFieldsValue()).forEach(key => {
      const obj = {};
      if (data[key]) {
        obj[key] = data[key] || null;
      }
      form.setFieldsValue(obj);
    });
  };

  componentDidMount() {
    const {
      dispatch,
      location: {
        query: { id },
        pathname,
      },
    } = this.props;
    const { setBaseInfo } = this;
    const isEdit = pathname.includes('edit');
    if (!isEdit) return;
    // 通过dispatch方法请求后台数据(dva数据管理)
    dispatch({
      type: 'getCompanyInfo/fetch',
      payload: {
        data: { id },
      },
      callBack(msg, status, data) {
        if (status === 200) {
          // 获取数据，调用返显方法
          setBaseInfo(data);
        } else {
          message.error(msg); 
        }
      }
    });
  }
  render() {
    const {
      dispatch,
      form: {
        getFieldDecorator,
        validateFields
      },
      location: {
        query: { id },
        pathname,
      },
      submitting,
    } = this.props;
    //因为新增功能和编辑功能调用的是同一个页面，所以需要根据pathname来判断一下我们对页面的操作是新增还是编辑
    const isEdit = pathname.includes('edit');
    // 保存数据时通过validateFields()进行页面Input控件的正则验证以及Input中value值的获取
    const onValidateForm = () => {
      const postUrl = isEdit ? 'updateCompanyInfo/fetch' : 'insertCompanyInfo/fetch';
      validateFields((err, fieldsValue) => {
        if (err) return;
        if (isEdit) {
          fieldsValue.id = id;
        }
        dispatch({
          type: postUrl,
          payload: {
            data: {
              ...fieldsValue,
            },
          },
          callBack( msg, status, data ) {
            if (status === 200) {
              // 保存数据成功后，进行路由跳转（umi的router）
              router.push({
                pathname: '/paramset/companyCtrl',
              });
            } else {
              message.error(msg);
            }
          },
        });
      });
    };

    return (
      <PageHeaderWrapper title={`${isEdit ? '编辑' : '新增'}签章信息`}>
        <div className={styles.tableList}>
          <div className={styles.tableListForm}>
            <Form layout='horizontal' labelAlign='right'>
              <Card title='基本信息' style={{ marginBottom: 22 }}>
                <Row gutter={30}>
                  <Col md={8} lg={8}>
                    <Form.Item {...formItemLayout} label='公司ID'>
                      {getFieldDecorator('companyId', {
                        rules: [
                          {
                            required: true,
                            message: '请输入公司ID',
                          },
                        ]
                      })(
                        <Input minLength={4} maxLength={32} placeholder='请输入' />
                      )}
                    </Form.Item>
                  </Col>
                  <Col md={8} lg={8}>
                    <Form.Item {...formItemLayout} label='公司名称'>
                      {getFieldDecorator('companyName', {
                        rules: [
                          {
                            required: true,
                            message: '请输入公司名称',
                          },
                        ],
                      })(
                        <Input maxLength={100} placeholder='请输入' />
                      )}
                    </Form.Item>
                  </Col>
                  <Col md={8} lg={8}>
                    <Form.Item {...formItemLayout} label='联系电话'>
                      {getFieldDecorator('phone')(
                        <Input maxLength={12} placeholder='请输入' />
                      )}
                    </Form.Item>
                  </Col>
                </Row>
              </Card>
              <footer style={{ textAlign: 'center' }}>
                <Button type='default' style={{ marginRight: 75 }}>
                  <Link to={{ pathname: '/paramset/companyCtrl' }}>返回</Link>
                </Button>
                <Button type='primary' onClick={onValidateForm} loading={submitting}>
                  保存
                </Button>
              </footer>
            </Form>
          </div>
        </div>
      </PageHeaderWrapper>
    );
  }
}