React+Antd项目，Form的Input已经有内容，但是还是提示此项为必填项，不能为空

一、前言

我们在进行数据采集功能开发的时候，往往会用到Form表单，这其中必不可少的就会用到Input（多种type类型）输入框。经常还会对其中的某一些Input输入做一些必填或者某些输入格式的限制，设置默认值和placehoder等等需求场景。我在使用React Antd构建含有多个Input组件的Form表格时，遇到了下述问题…

二、问题描述、分析及解决办法

2.1、问题描述

一个Form表单，包含了数个Input输入框组件，其中有一些为必填的Input框，其中有一些Input组件用defaultValue属性设置了默认值，即Input框内可以看到是有数据的，但是对这些Input内容不做任何修改，直接提交Form表单，发现必填的Input框会弹出“此项不能为空 / 此项为必填项，不可为空”的报错。
直接上图更直观：

2.2、问题分析

那么，既然Input框内表现看来，是有值的，但是为什么这个校验规则会被触发呢？于是，我想要把这个设置了defaultValue值的Input的value打印出来看看到底是什么情况。结果，打印出来的value竟然为undefined！
由此看来，必填报错规则是没有问题的，问题出在了这个设置了defaultValue的Input组件的初始的value值是没有的。

2.3、解决办法

那么，既然defaultValue不能时Input组件拥有一个初始的value值，要怎样设置这个初始的value呢？
默认值是Input输入框的，除非手动输入，否则Form表单并不能获取到Input的默认值。既然是表单的校验，则需要告诉表单，某个input有默认值，默认值为xxx。
所以，感觉接下来我们应该在Form表单组件上做些什么？对的，我查阅了一些资料，找到了Antd的Form组件中的initialValues属性，官网对这个属性的解读是这样的：

接下来，就直接上代码：

//  未修改bug的代码：
...
	<Form  name="XXX" ...>
		<Form.Item name="formItemName1" rules={[{required: true, message: '此项为必填项，不能为空！'}]}>
			<Input defaultValue={defauleData1} />
		</Form>
		...
	</Form>
...

//  修改bug后的代码
...
	//  注意1：initialValues的值是一个对象，也就意味着这里面的属性可以有多个，以对象的格式一次写入即可。
	//  注意2：属性的key是Form.Item的name属性的值，属性的value，填想要回填的默认值（我这里和Input中的defaultValue值保持一致）。
	//  注意3：Input需要设置value属性，这里保证和initialValues对象中对应键名后的值名一致。
	<Form  name="XXX" initialValues={{ formItemName1: defauleData1, formItemName2: defauleData2}} ...>
		<Form.Item name="formItemName1" rules={[{required: true, message: '此项为必填项，不能为空！'}]}>
			<Input defaultValue={defauleData1} value={defauleData1}/>
		</Form>
		...
	</Form>
...

到此，这个问题就完美解决了！

三、说明

最近在初步使用React过程中，还有很多机制不明白，所以，在此记录两个问题，后期我会翻阅资料对其进行自答（立个Flag鞭策自己不断学习）。如果诸君有清楚其原理的，也欢迎在评论区留言或者私信我，帮忙解答：
1、页面数据进行变化后，React什么情况下会重新渲染对应的DOM，更新页面，什么情况下不更新页面？
2、为什么有时候useState更新了数据之后，页面不会数据更新（useState是什么时候对数据进行更新的底层机制）？
参考链接：
Antd官网Form组件API
踩坑 antd Form表单获取input默认值失败，Form表单校验input 必填 默认值为undefined
欢迎大家一起讨论、学习

这篇好文章是转载于：学新通技术网