【ant desgin pro】Warning: Instance created by `useForm` is not connected to any Form element.

最新推荐文章于 2023-06-08 19:10:20 发布

原创最新推荐文章于 2023-06-08 19:10:20 发布 · 796 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言 #react

前端专栏收录该内容

17 篇文章

订阅专栏

在React中使用`useForm`时遇到警告，提示实例未连接到Form元素。问题源于在编辑页面初始化数据的代码`form.setFieldsValue(props.values)`。为避免问题，可以先检查`props.values`的属性数量，只有当有属性时才设置表单值。这样既能防止eslint报错，也能确保编辑页面的数据加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

警告：“useForm”创建的实例未连接到任何Form元素。
这是由于组件初始化报出的异常

const [form] = Form.useForm();
//主要是这块代码的原因造成,如果不用初始化数据，不写就没有问题了
form.setFieldsValue(props.values)

但是如果是编辑页面，不写的话，下次打开野蛮数据不会重新加载，那么，还是得写，怎么写呢？如下：

 let keys = []
 for(let key in props.values){
 	// 在react里，这个判断必须写，不然回报错
     if(props.values.hasOwnProperty(key)){
         keys.push(key)
     }
 }
const [form] = Form.useForm();
//这里判断传入的对象是否有属性，有属性再给form初始化数据
if(keys.length>0){
	form.setFieldsValue(props.values) 
}

在react中进行对象属性遍历的时候，需要加上 props.values.hasOwnProperty(key) 的判断，否则会报错误：The body of a for-in should be wrapped in an if statement to filter unwanted properties from the prototype.虽然说不会影响功能但是在编辑器上eslint会报红。作为一个前端，就是看不惯有报红的地方。