react項目 form表單重置 initialValue

項目中做了一個彈框，將新增和修改放到了同一個彈框，然後判斷一個對象是否有值來判斷是新增還是修改。

  render() {
    const extra = (
      <Group>
        <Button onClick={this.handleAdd}>新增商戶</Button>
      </Group>
    );

    return (
      <Card
        extra={extra}
        title="商戶信息"
        bordered={false}
      >
        <Search />
        <Table />
        <ModalUpdate />

        <ModalEdit />
      </Card>
    );
  }
}

ModalUpdate 文件的代碼如下

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import moment from 'moment';
import { Card, Button, Form, Row, Col, Input, DatePicker, Select, Modal } from 'antd';
import {
  fieldCheckSpace, fieldRequired
} from '../../../utils/utils';
import styles from './index.less';

const { Option } = Select;

const FormItem = Form.Item;


const thirdLayout = {
  xs: 24,
  sm: 24,
  md: 8,
  lg: 8,
  xl: 8,
  xxl: 8,
};
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 24 },
    md: { span: 8 },
    lg: { span: 8 },
    xl: { span: 8 },
    xxl: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 24 },
    md: { span: 14 },
    lg: { span: 14 },
    xl: { span: 14 },
    xxl: { span: 14 },
  },
};
@connect(({ cj_shxx, global, loading }) => ({
  cj_shxx,
  global,
}))
@Form.create()
export default class Main extends PureComponent {
  componentWillReceiveProps(nextProps) {
    if (!nextProps.cj_shxx.modalUpdateDetail) {
      this.props.form.resetFields();
    }
  }
  componentWillUnmount() {
    this.props.dispatch({
      type: 'cj_shxx/changeReducers',
      payload: {
        memberInfo: {}, // 數據
      },
    });
  }
  // 返回
  handleBack = () => {
    const { dispatch } = this.props;
    dispatch(routerRedux.goBack());
  };

  // 修改 狀態
  handleUpdate = (record) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cj_shxx/fetchUpdateMember',
      payload: {
        ...record,
        status: record.status === 'NORMAL' ? 'DISABLE' : 'NORMAL',
        isJumptoPage: false, // 是否跳頁
      }
    });
  };

  handleSubmit = () => {
    // e.preventDefault();
    const {
      form,
      dispatch,
      cj_shxx: {
        memberInfo,
      }
    } = this.props;
    const { memberId } = memberInfo;
    form.validateFields({ force: true }, (err, values) => {
      if (!err) {
        // 刪除 params.payload 中值爲 undefined
        Object.keys(values).map((k) => {
          if (values[k] === undefined) {
            delete values[k];
          }
        });
        if (memberId) { // 修改
          dispatch({
            type: 'cj_shxx/fetchUpdateMember',
            payload: {
              ...memberInfo,
              ...values,
            }
          });
        } else {
          dispatch({
            type: 'cj_shxx/fetchAddMember',
            payload: {
              ...values,
            }
          });
        }
      }
    });
  };

  // 關閉
  handleCancel = () => {
    this.props.dispatch({
      type: 'cj_shxx/changeReducers',
      payload: {
        modalUpdateDetail: false,
        memberInfo: {},
      }
    });
  };

  render() {
    const {
      cj_shxx,
      form,
      loadingAllRole,
    } = this.props;
    const { getFieldDecorator } = form;
    const { memberInfo, modalUpdateDetail, } = cj_shxx;
    const {
      id,
      memberId,
      memberName,
      shortName,
      owned,
      skillName,
      email,
      phone,
      websiteName,
      website,
      auditor,
      auditAt,
      auditStatus,
      status,
      deleteFlag,
      createdAt,
      createdBy,
      updatedAt,
      updatedBy,
      legalFlg,
      signOrg,
      orgTpCd,
      regRgnTpCd,
      busRgnTpCd,
      provinceTpCd,
      licenseCode,
      icpCode,
      mainOper,
      partOper,
      licenseBeginDate,
      licenseEndDate,
      legalrepresentname,
      legalrepresentid,
      citycode,
      districtCode,
      regAddress,
      regAddrPost,
      runAddr,
      runAddrPost,
      fax,
      phone_service,
      organizationCode,
      remark,
    } = memberInfo;

    return (
      <Modal
        // confirmLoading={loading}
        style={{ top: 20 }}
        onOk={this.handleSubmit}
        visible={modalUpdateDetail}
        title={memberId ? '修改商戶信息' : '新增商戶信息'}
        onCancel={this.handleCancel}
        width={1200}
        // maskClosable={false}
        className={styles.updateLayout}
      >
        <Form>
          <Row gutter={10}>
            <Col {...thirdLayout}>
              <FormItem
                label="簡稱"
                {...formItemLayout}
              >
                {getFieldDecorator('shortName', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 32, message: '不能超過32個字' },
                  ],
                  initialValue: shortName
                })(
                  <Input placeholder="請輸入簡稱" />
                )}
              </FormItem>

              <FormItem
                label="業務聯繫人"
                {...formItemLayout}
              >
                {getFieldDecorator('skillName', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 32, message: '不能超過32個字' },
                  ],
                  initialValue: skillName,
                })(
                  <Input placeholder="請輸入業務聯繫人" />
                )}
              </FormItem>

              <FormItem
                label="網站名稱"
                {...formItemLayout}
              >
                {getFieldDecorator('websiteName', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 82, message: '不能超過82個字' },
                  ],
                  initialValue: websiteName,
                })(
                  <Input placeholder="請輸入網站名稱" />
                )}
              </FormItem>

              <FormItem
                label="營業執照開業日期"
                {...formItemLayout}
              >
                {getFieldDecorator('licenseBeginDate', {
                  rules: [
                  ],
                  initialValue: licenseBeginDate && licenseBeginDate !== null ?
                    moment(licenseBeginDate) : null,
                })(
                  <DatePicker />
                )}
              </FormItem>
              <FormItem
                label="營業執照到期日"
                {...formItemLayout}
              >
                {getFieldDecorator('licenseEndDate', {
                  rules: [
                  ],
                  initialValue: licenseEndDate && licenseEndDate !== null ?
                    moment(licenseEndDate) : null,
                })(
                  <DatePicker />
                )}
              </FormItem>

              <FormItem
                label="服務電話"
                {...formItemLayout}
              >
                {getFieldDecorator('phone_service', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 16, message: '不能超過16個字' },
                  ],
                  initialValue: phone_service,
                })(
                  <Input placeholder="請輸入服務電話" />
                )}
              </FormItem>
              <FormItem
                label="營業執照"
                {...formItemLayout}
              >
                {getFieldDecorator('licenseCode', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 32, message: '不能超過32個字' },
                  ],
                  initialValue: licenseCode,
                })(
                  <Input placeholder="請輸入營業執照" />
                )}
              </FormItem>
              <FormItem
                label="縣/區"
                {...formItemLayout}
              >
                {getFieldDecorator('districtCode', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 32, message: '不能超過32個字' },
                  ],
                  initialValue: districtCode,
                })(
                  <Input placeholder="請輸入縣/區" />
                )}
              </FormItem>
              <FormItem
                label="營業地址"
                {...formItemLayout}
              >
                {getFieldDecorator('runAddr', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 64, message: '不能超過64個字' },
                  ],
                  initialValue: runAddr,
                })(
                  <Input placeholder="請輸入營業地址" />
                )}
              </FormItem>
              <FormItem
                label="ICP備案號"
                {...formItemLayout}
              >
                {getFieldDecorator('icpCode', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 32, message: '不能超過32個字' },
                  ],
                  initialValue: icpCode,
                })(
                  <Input placeholder="請輸入ICP備案號" />
                )}
              </FormItem>
            </Col>
            <Col {...thirdLayout}>
              <FormItem
                label="商戶名稱"
                {...formItemLayout}
              >
                {getFieldDecorator('memberName', {
                  rules: [
                    { ...fieldRequired('商戶名稱') },
                    { ...fieldCheckSpace },
                    { max: 125, message: '不能超過125個字' },
                  ],
                  initialValue: memberName,
                })(
                  <Input placeholder="請輸入商戶名稱" />
                )}
              </FormItem>
              <FormItem
                label="業務聯繫人郵箱"
                {...formItemLayout}
              >
                {getFieldDecorator('email', {
                  rules: [
                    { ...fieldRequired('業務聯繫人郵箱') },
                    { ...fieldCheckSpace },
                    { max: 64, message: '不能超過64個字' },
                  ],
                  initialValue: email,
                })(
                  <Input placeholder="請輸入業務聯繫人郵箱" />
                )}
              </FormItem>

              <FormItem
                label="網址"
                {...formItemLayout}
              >
                {getFieldDecorator('website', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 64, message: '不能超過64個字' },
                  ],
                  initialValue: website,
                })(
                  <Input placeholder="請輸入網址" />
                )}
              </FormItem>
              <FormItem
                label="法人代表姓名"
                {...formItemLayout}
              >
                {getFieldDecorator('legalrepresentname', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 32, message: '不能超過32個字' },
                  ],
                  initialValue: legalrepresentname,
                })(
                  <Input placeholder="請輸入法人代表姓名" />
                )}
              </FormItem>
              <FormItem
                label="法人代表身份證"
                {...formItemLayout}
              >
                {getFieldDecorator('legalrepresentid', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 18, message: '不能超過18個字' },
                  ],
                  initialValue: legalrepresentid,
                })(
                  <Input placeholder="請輸入法人代表身份證" />
                )}
              </FormItem>
              <FormItem
                label="註冊國家"
                {...formItemLayout}
              >
                {getFieldDecorator('regRgnTpCd', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 32, message: '不能超過32個字' },
                  ],
                  initialValue: regRgnTpCd,
                })(
                  <Input placeholder="請輸入註冊國家" />
                )}
              </FormItem>
              <FormItem
                label="營業國家"
                {...formItemLayout}
              >
                {getFieldDecorator('busRgnTpCd', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 32, message: '不能超過32個字' },
                  ],
                  initialValue: busRgnTpCd,
                })(
                  <Input placeholder="請輸入營業國家" />
                )}
              </FormItem>

              <FormItem
                label="註冊地址"
                {...formItemLayout}
              >
                {getFieldDecorator('regAddress', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 64, message: '不能超過64個字' },
                  ],
                  initialValue: regAddress,
                })(
                  <Input placeholder="請輸入註冊地址" />
                )}
              </FormItem>
              <FormItem
                label="營業地址郵編"
                {...formItemLayout}
              >
                {getFieldDecorator('runAddrPost', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 6, message: '不能超過6個字' },
                  ],
                  initialValue: runAddrPost,
                })(
                  <Input placeholder="請輸入營業地址郵編" />
                )}
              </FormItem>
              <FormItem
                label="兼營業務"
                {...formItemLayout}
              >
                {getFieldDecorator('partOper', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 100, message: '不能超過100個字' },
                  ],
                  initialValue: partOper,
                })(
                  <Input placeholder="請輸入兼營業務" />
                )}
              </FormItem>
            </Col>
            <Col {...thirdLayout}>
              <FormItem
                label="所屬公司"
                {...formItemLayout}
              >
                {getFieldDecorator('owned', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 32, message: '不能超過32個字' },
                  ],
                  initialValue: owned,
                })(
                  <Input placeholder="請輸入所屬公司" />
                )}
              </FormItem>
              <FormItem
                label="業務聯繫人手機"
                {...formItemLayout}
              >
                {getFieldDecorator('phone', {
                  rules: [
                    { ...fieldRequired('業務聯繫人手機') },
                    { max: 64, message: '不能超過11個字' },
                  ],
                  initialValue: phone,
                })(
                  <Input placeholder="請輸入業務聯繫人手機" />
                )}
              </FormItem>
              <FormItem
                label="簽約機構"
                {...formItemLayout}
              >
                {getFieldDecorator('signOrg', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 8, message: '不能超過8個字' },
                  ],
                  initialValue: signOrg,
                })(
                  <Input placeholder="請輸入簽約機構" />
                )}
              </FormItem>
              <FormItem
                label="組織機構代碼號"
                {...formItemLayout}
              >
                {getFieldDecorator('organizationCode', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 32, message: '不能超過32個字' },
                  ],
                  initialValue: organizationCode,
                })(
                  <Input placeholder="請輸入組織機構代碼號（3證之一）" />
                )}
              </FormItem>
              <FormItem
                label="傳真"
                {...formItemLayout}
              >
                {getFieldDecorator('fax', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 32, message: '不能超過32個字' },
                  ],
                  initialValue: fax,
                })(
                  <Input placeholder="請輸入傳真" />
                )}
              </FormItem>
              <FormItem
                label="所在省份/州"
                {...formItemLayout}
              >
                {getFieldDecorator('provinceTpCd', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 32, message: '不能超過32個字' },
                  ],
                  initialValue: provinceTpCd,
                })(
                  <Input placeholder="請輸入所在省份/州" />
                )}
              </FormItem>
              <FormItem
                label="所在城市"
                {...formItemLayout}
              >
                {getFieldDecorator('citycode', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 32, message: '不能超過32個字' },
                  ],
                  initialValue: citycode,
                })(
                  <Input placeholder="請輸入所在城市" />
                )}
              </FormItem>
              <FormItem
                label="註冊地址郵編"
                {...formItemLayout}
              >
                {getFieldDecorator('regAddrPost', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 6, message: '不能超過6個字' },
                  ],
                  initialValue: regAddrPost,
                })(
                  <Input placeholder="請輸入註冊地址郵編" />
                )}
              </FormItem>
              <FormItem
                label="主營業務"
                {...formItemLayout}
              >
                {getFieldDecorator('mainOper', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 32, message: '不能超過32個字' },
                  ],
                  initialValue: mainOper,
                })(
                  <Input placeholder="請輸入主營業務" />
                )}
              </FormItem>
            </Col>
          </Row>
        </Form>
      </Modal>
    );
  }
}

代碼中使用visible={modalUpdateDetail} 來進行判斷彈框是否展示，進行測試的時候發現，

如果第一步操作執行的是修改操作，一些默認值填充上去，如果不作處理，第二部執行新增操作的時候，會把第一個默認的值帶着，導致新增彈框彈出來的時候form表單中就是數值，效果體驗特別不好，

後面發現在Modal文件裏面添加componentWillReceiveProps中處理報表重置，就可以刷新form表單

componentWillReceiveProps(nextProps) {
    if (!nextProps.cj_shxx.modalUpdateDetail) {
      this.props.form.resetFields();
    }
  }