antd4.9 form表单setfieldsvalue 修改表单值

import FormRule from '@/utils/validate.js';
import { Form, Input,Button } from 'antd';
import { inject, observer } from 'mobx-react';
import React, { useEffect } from 'react';
import { userGroupInfoMap,buttonName } from '../keyMap';


const { TextArea } = Input;
const InformatiaonPane = (props) => {

    const store = getMobxStoreData(props.userGroupStore);// eslint-disable-line
    const [form] = Form.useForm();
    const formRef = React.createRef()
    const { userGroupEditData, create } = store;
    const onFinish = (values) => {
        store.createUserGroup({ ...userGroupEditData, ...values });
    }
    
    useEffect(()=>{
        formRef.current.setFieldsValue(userGroupEditData)
    },[userGroupEditData])

    const formItemLayout = { labelCol: { span: 2 }, wrapperCol: { span: 15 } };
    const tailLayout = {
        wrapperCol: { offset: 2, span: 16 },
      };
   
     
    return (
        <>
            <Form form={form} onFinish={onFinish} ref={formRef} >
            {console.log('rightForm',store.userGroupEditData["appId"])}
                {Object.keys(userGroupInfoMap).map(key => {
                    const component = <Input placeholder={`请输入${userGroupInfoMap[key]}`}
                    disabled={key==='appId'||key==='name'?true:false}
                    maxLength={64} />
                  
                    const options = {
                        initialValue: store.userGroupEditData[key],
                        rules: [],
                    };
                    if (key === 'appId') {
                        options.rules.push(FormRule.required);
                    }
                    if (key === 'name') {
                        options.rules.push(FormRule.required);
                    }
                    if (key === 'description') {
                        return (
                            <Form.Item
                                label={userGroupInfoMap[key]}
                                {...formItemLayout}
                                key={key}
                                name={key}
                                {...options} >
                                <TextArea 
                                    rows={3}
                                    placeholder="请输入描述"
                                    autoSize={{ minRows: 3, maxRows: 15 }}
                                />
                            </Form.Item>
                        );
                    }
                    return (
                        <Form.Item
                            label={userGroupInfoMap[key]}
                            {...formItemLayout}
                            key={key}
                            name={key}
                            {...options} >
                            {component}
                        </Form.Item>
                    );
                })}
               
                <Form.Item {...tailLayout}>
                    <Button type="primary" htmlType="submit" onClick={()=>{this.handleOk}}>
                        {buttonName.submit}
                     </Button>
                </Form.Item>
            </Form>
        </>
    )
}

export default inject('userGroupStore')(observer(InformatiaonPane));