antd+form，initialValue值变化后不更新

项目场景：

使用antd组件，弹出层中的编辑表单

问题描述：

在表格展示数据时，经常会伴随着编辑的操作，点击编辑按钮，弹出表单，并且会将数据显示在编辑表单中，以供用户查看。这时会用到form表单的initialValue属性，用以初始化默认值，可以看到表单中的次数为326.

我将99的次数改为800，成功编辑之后，点击94的配置按钮，这时表单中并没有显示94的数据，反而显示的是刚才修改的数据。我以为是表单中的数据获取错误，console打印一下。
获取到的数据确实是94的数据，但是initialValue的值没有改变，表单中显示的却是99的数据？

原因分析：

当我们第一次点开Modal的时候， 会得到一个initialValue,但是这个值只在组件挂载的时候执行了一次，后续数据的更新并不会造成重新渲染，所以当我们再次打开Modal窗口的时候并不会更新。

解决方案：

方法一：使用form.resetFields()

const CollectionCreateForm: React.FC<UpdateFormProps> = (props) => {
  const {onCancel,onSubmit,visible,values} = props
  console.log(values)
  const [form] = Form.useForm();
  return (
    <Modal
      visible={visible}
      title="配置表格"
      okText="确定"
      cancelText="取消"
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          // eslint-disable-next-line @typescript-eslint/no-shadow
          .then(values => {
            form.resetFields(); // 离开时清除表单数据
            onSubmit(values);
          })
          .catch((info) => {
            console.log('Validate Failed:', info);
          });
      }}
    >

使用resetFields方法会直接重置为initialValue的值，这样再次打开编辑表单就是我们想要的数据啦。

方法二：使用form.setFieldsValue
对于initialValue不更新问题官方文档已经给出了解决方法

const CollectionCreateForm: React.FC<UpdateFormProps> = (props) => {
  const {onCancel,onSubmit,visible,values} = props
  console.log(values)
  const [form] = Form.useForm(); //定义form
  form.setFieldsValue({
    name:values.name,
    desc:values.desc,
    callNo:values.callNo,
  })
  return (
    <Modal
      visible={visible}
      title="配置表格"
      okText="确定"
      cancelText="取消"
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          // eslint-disable-next-line @typescript-eslint/no-shadow
          .then(values => {
            // form.resetFields();
            onSubmit(values);
          })
          .catch((info) => {
            console.log('Validate Failed:', info);
          });
      }}
    >
      <Form
        form={form}
        layout="vertical"
        name="form_in_modal"
        initialValues={values} // form中使用
      >

碰到问题的时候还是要多阅读官方文档，很多问题文档就给出了解决方法。