前言

在使用 AntD 的Form组件时，使用 hook 操作数据。

js
export function () {
  const [form] = Form.useForm()
  // ...
  return (
    <Form form={form}>
      //...
    </Form>
  )
}

如上所示，form已经绑定到了组件Form，但是还是出现如下报错：

Warning: Instance created by `useForm` is not connected to any Form element. Forget to pass `form` prop?

说form没有绑定到组件Form上面去。

原因

这个Form是在Modal组件里面的，在调用useForm时，Modal内部的组件并未渲染，进行form.setFieldsValue之类的操作的时候，就提示没有绑定到Form上了。

解决

不太严谨地说，其实这种情况下报错事实上是不影响我们页面功能的正常使用的。

如果需要消除这个报错的话，可以强制Modal组件渲染或者监听组件，当组件渲染了之后再进行表单相关操作。

强制渲染

根据 AntD 的文档：

为何在 Modal 中调用 form 控制台会报错？#
Warning: Instance created by useForm is not connect to any Form element. Forget to pass form prop?

这是因为你在调用 form 方法时，Modal 还未初始化导致 form 没有关联任何 Form 组件。你可以通过给 Modal 设置 forceRender 将其预渲染。

我们可以给Modal加上forceRender属性预渲染组件。

js
import { Form, Input, Modal } from 'antd'
import React from 'react'
import { useEffect } from 'react'
export default function EditModal (props) {
  const {
    open = false,
  } = props
  const [form] = Form.useForm()
  // ...
  useEffect(() => {
    form.setFieldsValue({ /* ... */ })
  }, [form, open])
  // ...
  return (
    <Modal open={open} forceRender>
      <Form form={form} style={{ marginTop: 36 }}>
        <Form.Item rules={[{ required: true, message: '新标签名不能为空' }]} name='newName' label='新标签名'>
          <Input placeholder='请输入新标签名' allowClear/>
        </Form.Item>
      </Form>
    </Modal>
  )
}

监听组件渲染

通过设置ref的方法来判断表单是否已经渲染了。

js
import { Form, Input, Modal } from 'antd'
import React from 'react'
import { useRef } from 'react'
import { useEffect } from 'react'
export default function EditModal (props) {
  const {
    open = false,
  } = props
  const [form] = Form.useForm()
  // ...
  const formRef = useRef(null)
  useEffect(() => {
    if (formRef.current) {
      form.setFieldsValue({ /* ... */ })
    }
  }, [form, open])
  // ...
  return (
    <Modal open={open}>
      <Form ref={formRef} form={form} style={{ marginTop: 36 }}>
        <Form.Item rules={[{ required: true, message: '新标签名不能为空' }]} name='newName' label='新标签名'>
          <Input placeholder='请输入新标签名' allowClear/>
        </Form.Item>
      </Form>
    </Modal>
  )
}