警告：由`useForm` 创建的实例未连接到任何表单元素

Question

我有一个构建表单的应用程序，我想为表单设置默认值。我用过：const [form] = Form.useForm();。我的表单标签如下所示：

<Form form={form} name="basic" onFinish={onFinish} onFinishFailed={onFinishFailed}>

我尝试设置默认值：

form.setFieldsValue({
  name: object.name,
});

在这里我收到下一个警告： Warning: Instance created by `useForm` is not connect to any Form element. Forget to pass `form` prop?

我在这个主题上看到了很多答案，但他们通过添加form={form}. 在我的情况下它不起作用。可能是什么问题？

Answer 1

在 Modal 打开之前，视图中不存在子元素。您可以forceRender在 Modal 上设置预渲染其子项。来源

  <Modal forceRender visible={visible} onOk={okHandler} onCancel={closeHandler}>
    <Form form={form}>
      <Form.Item name="user">
        <Input />
      </Form.Item>
    </Form>
  </Modal>

Answer 2

如果您在Form组件内部使用组件Modal，请提醒设置getContainer={false}为Modal组件。

这是链接：https : //ant.design/components/modal/

Answer 3

我通过使用解决了这个问题，form.__INTERNAL__.name因为如果创建的实例useForm未连接到任何表单元素，则 this 将是未定义的（请记住在表单元素上设置 name 属性，否则form.__INTERNAL__.name在这两种情况下都将是未定义的）。

const form = useForm();
if (form.__INTERNAL__.name) {
   // do form logic here
   form.setFieldsValue({name: "Ahmed Hamed"});
}

...
<Form name="myForm" form={form}>...</Form>
...

Answer 4

I think it's warning because you call form method

form.setFieldsValue({
    note: text.note,
    gender: text.gender
});

before form instance patch on the form component <Form form={form}.... So I think you should call it when componentDidMount

useEffect(() => {
    form.setFieldsValue({ note: "2", gender: "demo" });
    setText({ note: "2", gender: "demo" });
}, []);

or

useEffect(() => {
    setText({ note: "2", gender: "demo" });
}, []);

useEffect(() => {
    form.setFieldsValue({ note: text.note, gender: text.gender });
}, [text]);