Reactjs 警告:“useForm”创建的实例未连接到任何表单元素
我有一个构建表单的应用程序,我想为表单设置DefaultValue。 我使用:Reactjs 警告:“useForm”创建的实例未连接到任何表单元素,reactjs,Reactjs,我有一个构建表单的应用程序,我想为表单设置DefaultValue。 我使用:const[form]=form.useForm()。我的表单标签如下所示: <Form form={form} name="basic" onFinish={onFinish} onFinishFailed={onFinishFailed}> 这里我得到了下一个警告:警告:“useForm”创建的实例没有连接到任何表单元素。忘记传递'form'道具? 我看到很多关于这个主题的答案,但是他们通过添加for
const[form]=form.useForm()代码>。我的表单标签如下所示:
<Form form={form} name="basic" onFinish={onFinish} onFinishFailed={onFinishFailed}>
这里我得到了下一个警告:警告:“useForm”创建的实例没有连接到任何表单元素。忘记传递'form'道具?
我看到很多关于这个主题的答案,但是他们通过添加form={form}
解决了这个问题。就我而言,它不起作用。可能是什么问题?我认为这是警告,因为您调用了表单方法
form.setFieldsValue({
note: text.note,
gender: text.gender
});
表单组件上的表单实例补丁之前
我就是这样解决的我也采用了这个解决方案
setTimeout(function () {
form.setFieldsValue(node);
},0);
不是很有用,但这样解决了问题,相反,我无法使用useffect进行拦截。
我现在的代码
const EditModal = () => {
const [form] = Form.useForm();
const [visible,setVisible] = useState(false);
[...]
EditModal.open = (data) => {
setTimeout(function () {
form.setFieldsValue({ title: data.title, des: data.des, });
},0);
setVisible(true);
}
return <>... <Form form={form}
const editmodel=()=>{
const[form]=form.useForm();
const[visible,setVisible]=useState(false);
[...]
editmodel.open=(数据)=>{
setTimeout(函数(){
form.setFieldsValue({title:data.title,des:data.des,});
},0);
setVisible(真);
}
返回…如果您在Modal
组件中使用Form
组件,请提醒将getContainer={false}
设置为Modal
组件
以下是链接:在打开模态之前,视图中不存在子元素。您可以在模态上设置forceRender
,以预渲染其子元素
我通过使用表单解决了这个问题。
因为如果由useForm
创建的实例未连接到任何表单元素,则这将是未定义的(请记住在表单元素上设置name属性,或者表单。
在这两种情况下都将未定义内部名称)
const form=useForm();
if(表格\内部\名称){
//你在这里形成逻辑吗
form.setFieldsValue({name:“Ahmed Hamed”});
}
...
...
...
你能分享完整的代码还是代码沙盒?@iamhuynq,代码是这样的:嗯,我看不到任何警告here@iamhuynq,当我在应用程序中(而不是在沙盒上)使用此选项时,警告appears@iamhuynq,现在警告出现在这里:经过几个月的努力,我终于解决了这个警告!谢谢你的回复,你帮了我很多也适用于抽屉
。谢谢!非常感谢!适用于我的案例)带子表单进入模态
useEffect(() => {
setText({ note: "2", gender: "demo" });
}, []);
useEffect(() => {
form.setFieldsValue({ note: text.note, gender: text.gender });
}, [text]);
setTimeout(function () {
form.setFieldsValue(node);
},0);
setTimeout(function () {
form.setFieldsValue(node);
},0);
const EditModal = () => {
const [form] = Form.useForm();
const [visible,setVisible] = useState(false);
[...]
EditModal.open = (data) => {
setTimeout(function () {
form.setFieldsValue({ title: data.title, des: data.des, });
},0);
setVisible(true);
}
return <>... <Form form={form}
<Modal forceRender visible={visible} onOk={okHandler} onCancel={closeHandler}>
<Form form={form}>
<Form.Item name="user">
<Input />
</Form.Item>
</Form>
</Modal>
const form = useForm();
if (form.__INTERNAL__.name) {
// do form logic here
form.setFieldsValue({name: "Ahmed Hamed"});
}
...
<Form name="myForm" form={form}>...</Form>
...