React+antd中form的创建和编辑使用同一组件的回显问题

React+antd中form的创建和编辑使用同一组件的回显问题
笔记中的需求讲解：
创建和编辑都是antd中的modal弹框，弹框的内容那是form表单，所以创建不用说，重点则是编辑时的回显。创建和编辑就传个不同值来区别什么时候是创建，什么时候是编辑就好了，笔记不细说了。
React:
使用父传子的形式：
直接可以在componentWillMount这个生命周期中就能拿到数据，然后是用antd——form的一个属性：setFieldsValue设置name就🆗了。

componentWillMount(){
	const { setFieldsValue } = this.props.form;
	setFieldsValue({
		username: “userName”
	})
}

通过dva的形式
如果要用dva 的话, 那引入那个modal组件会被先加载出来，那个时候我们还没有要弹出模态框，而componentWillMount只会执行一次，也就是说我们拿不到更改后的值。
注：componentWillReceiveProps可以拿到，但是在里面设置this.props.form.setFieldsValue会报错而引起死循环，但是我设置setTimeout可以不报错，
但是会造成页面一直刷新，会给页面造成负担，clearTimeout（）清楚也不行，因为这样的话值就不显示了
解决方法：

//--------------------------------------------------------------------------------------------------------------
class中的render里面的
<div>
                    <Modal
                        title="编辑应急班次"
                        visible={editorState}
                        onOk={this.handleOk}
                        onCancel={this.handleCancel}
                        destroyOnClose={true}
                        width="60%"
                    >
                        <div className={test.TestEditor}>
                            <Form {...formItemLayout}>
                                <Row>
                                    <Col md={12} sm={24}>
                                        <Form.Item label="班次名称">
                                            {getFieldDecorator('shiftNasme', config.name)(<Input/>)}
                                        </Form.Item>
                                    </Col>
                                    <Col md={12} sm={24}>
                                        <Form.Item label="排班单位">
                                            {getFieldDecorator('typesettingUnit', config.unit)(<Input/>)}
                                        </Form.Item>
                                    </Col>
                                    <Col md={12} sm={24}>
                                        <Form.Item label="开始时间">
                                            {getFieldDecorator('startEndTime', config.startTime)(<TimePicker />)}
                                        </Form.Item>
                                    </Col>
                                    <Col md={12} sm={24}>
                                        <Form.Item label="结束时间">
                                            {getFieldDecorator('createTime', config.endTime)(<TimePicker />)}
                                        </Form.Item>
                                    </Col>
                                </Row>
                            </Form>
                        </div>
                    </Modal>
                </div>
// -------------------------------------------------------------------------------------------------------------------
 class外面的：
 	function mapPropsToFields(props){
    if(props.flag === 1 || props.flag === "1") {
        let timeData = props.editor.startEndTime.split("-");
        let startTime = moment(timeData[0], "HH:mm:ss");
        let endTime = moment(timeData[1], "HH:mm:ss");
        return {
            // 班次名称
            shiftNasme: Form.createFormField({
                ...props.username,
                value: props.editor.shiftNasme
            }),
            // 排班单位
            typesettingUnit: Form.createFormField({
                ...props.username,
                value: props.editor.typesettingUnit
            }),
            // 开始时间
            startEndTime: Form.createFormField({
                ...props.username,
                value: startTime
            }),
            // 创建时间
            createTime: Form.createFormField({
                ...props.username,
                value: endTime
            }),
        };   
    }
}
// ------------------------------------------
导出：
const TestEditorData = Form.create({
    mapPropsToFields:mapPropsToFields
})(TestEditor);
export default TestEditorData

以上的是class组件使用antd3的用法。

还有class组件使用的antd4的用法。
用法：class组件肯定不能像上面那样显示数据，而是通过

// 引入
import {  Form, Input  } from 'antd';
const FormItem = Form.Item;

// 因为我项目使用的是tsx模板，所以formRef写法和别的不同
formRef = React.createRef<FormInstance>();

// 这里是通过ref的方式来设置、获取、重置值等操作的
<Form ref={this.formRef} name="control-ref">
		<FormItem
         	name="dutyType"
        	initialValue={'1'}
         >
           <Input />
         </FormItem>
</Form>

// 获取值
this.formRef.current.validateFields().then(res => {
	console.log(res)
}).catch(err => {
	console.log(err);
})
// 值得注意的是，设置属性值也是不同的。
在class类中我们是通过initialValue，initialValues来设置的
这两个的区别就是可以在全局的Form（initialValues）标签中全部设置，也可在单个的Form.Item（initialValue）中设置
initialValue={"属性名"}
initialValues={{
	name: "我是Form.Item中的label值对应的名称",
	residence: ['zhejiang', 'hangzhou', 'xihu'],
    prefix: '86',
}}
重置等其他操作，可是自行看Ant Design的api;
注：在共用编辑和新建还是要重置的，否则form暂存了数据。

reactHook:
在useEffect中就可以拿到最新的，所以不像react那样区分
原因：reactHook中的useEffect是：componentDidMount 和 componentDidUpdate 两个生命周期函数，所以数据有更改会拿到最新的。
注意：要判断是编辑或者增加状态的时候要先，resetFields，重置一下form表单的状态，原因：
因为你在先进入“编辑”，然后再进入“新建”，就算你进入的是各自的状态，但是会发现form表单已经在编辑中显示的数据会在新建的状态中也会照常显示，这可以认为form表单已经暂存了数据，你需要先重置一下，然后再进入编辑和增加的判断，这样就会完成效果了。

——
如果哪里有错误的点，还望指出哦。