动态更新initialValue的值

问题

[antd: Form.Item] defaultValue will not work on controlled Field. You should use initialValues o

原因：antd禁止在form.item下的组件使用默认属性
解决办法：删除defaultValue,在中使用initialValue={{ parentId: parentId }}代替，如果要动态更新 parentId的值，又会导致下面的问题

React does not recognize the initialValue prop on a DOM element.

**原因：**不能通过这种方法更新parentId的值，想要更新props中的值，要通过form.setFieldsValue({ parentId: parentId })进行更改，

你不能用控件的 value 或 defaultValue 等属性来设置表单域的值，默认值可以用 Form 里的 initialValues 来设置。注意 initialValues 不能被 setState 动态更新，你需要用 setFieldsValue 来更新。

由上可知，表单中不能设置默认值，要想设置默认值必须通过form中的initial Values进行设置，但是其又不能动态更新，想要达到动态更新的效果必须使用form中的setFieldsValue进行更新，需要检测parentId的变化从而对parentId进行修改，固需要在useEffect中使用setFieldsValue

如果需要在父组件中得到子组件的form表单中的值，可以通过函数传参的方式，将子组件的form对象传递给父组件，这样父组件得到子组件的form对象，就可以通过getFieldValue得到表单的值了。

    const [form] = Form.useForm()
    //将子组件的form传递给父组件，使得父组件可以取到子组件form中的categorieName的值
    props.setForm(form)
    // 动态更新parentId的值
    useEffect(() => {
        form.setFieldsValue({ parentId: parentId })
    }, [parentId])

import React, { Fragment, useEffect } from 'react'
import { Form, Input, Select } from 'antd'
import { useForm } from 'antd/lib/form/Form';

const { Option } = Select;

export default function AddForm(props) {
    const { categorys, parentId } = props
    const [form] = Form.useForm()
    console.log(parentId)
    // 动态更新parentId的值
    useEffect(() => {
        form.setFieldsValue({ parentId: parentId })
    }, [parentId])
    return (
        <Fragment>
            {/* initialValues不能被动态更新，需要使用form.setFieldsValues进行动态更新，将其放在useEffect中 */}
            <Form form={form}>
                <span>所属分类</span>
                <Form.Item
                    name="parentId"
                    rules={[
                        {
                            required: true,
                            message: 'Please select category!',
                        },
                    ]}
                >
                    {/* 表单中不能使用默认属性defaultValue，在form中使用initialValues{{}}代替 */}
                    <Select >
                        <Option value='0'>一级分类</Option>
                        {
                            categorys.map(c => <Option key={c._id} value={c._id}>{c.name}</Option>)
                        }
                    </Select>
                </Form.Item>
                <span>分类名称</span>
                <Form.Item
                    name="categoryName"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your categoryName!'
                        }
                    ]}
                >
                    <Input placeholder="添加分类" />
                </Form.Item>
            </Form>
        </Fragment >
    )
}