Antd使用＜Form.item＞报错Warning: [antd: Form.Item] `children` is array of render props cannot have `name`_综合

说明：

只记录个人错误和解决方法，如果可以，希望能帮助到您，给您提供一个思路，但技术不断更新，所以一切以官网为主。

需求：

在Antd的Modal中在Form组件中完成点击按钮展开右侧：
在这里插入图片描述

展开如下图所示：
在这里插入图片描述

问题1：

但Antd中默认是一行一行，如果直接在< Form.item >中嵌套< Form.item >会报题示的错误。

解决1：

在官方文档中的 < Form > 说明中，右侧导航栏“复杂一点的控件”
以下文字摘自官网：

在这里插入图片描述
这里演示 Form.Item 内有多个元素的使用方式。<Form.Item name=“field” /> 只会对它的直接子元素绑定表单功能，例如直接包裹了 Input/Select。如果控件前后还有一些文案或样式装点，或者一个表单项内有多个控件，你可以使用内嵌的 Form.Item 完成。你可以给 Form.Item 自定义 style 进行内联布局，或者添加 noStyle 作为纯粹的无样式绑定组件（类似 3.x 中的 getFieldDecorator）。

- <Form.Item label="Field" name="field">
-   < Input />
- </Form.Item>
+ <Form.Item label="Field">
+   <Form.Item name="field" noStyle><Input /></Form.Item> // 直接包裹才会绑定表单
+   <span>description</span>
+ </Form.Item>

这里展示了三种典型场景：
Username：输入框后面有描述文案或其他组件，在 Form.Item 内使用 <Form.Item name=“field” noStyle /> 去绑定对应子控件。

Address：有两个控件，在 Form.Item 内使用两个 <Form.Item name=“field” noStyle /> 分别绑定对应控件。

BirthDate：有两个内联控件，错误信息展示各自控件下，使用两个 <Form.Item name=“field” /> 分别绑定对应控件，并修改 style 使其内联布局。

注意，在 label 对应的 Form.Item 上不要在指定 name 属性，这个 Item 只作为布局作用。

实例：

const onChangeChecked = (checked) => {
    setRefreshType(checked)
}<Form.Itemlabel="One"valuePropName='checked'style={
    {
     margin: 0 }}
><Form.Itemname="one"valuePropName='checked'style={
    {
     display: 'inline-block', marginRight: '15%' }}><Switch onChange={
    onChangeChecked} /></Form.Item><Form.Itemname="first"style={
    {
     display: 'inline-block' }}><div><label>One-first:</label><InputNumber min={
    1} defaultValue={
    editIntervalTime || 1} /><span className="ant-form-text"> minutes</span></div></Form.Item></Form.Item><Form.Itemlabel="Two"style={
    {
     margin: 0 }}
><Form.Itemname="two"valuePropName='checked'style={
    {
     display: 'inline-block', marginRight: '15%' }}><Switch onChange={
    onChangeCapping} /></Form.Item><div style={
    {
     display: 'inline-block' }}><Form.Itemname="two_first"style={
    {
     display: 'inline-block' }}><div><label>Two-first:</label><InputNumber min={
    0} defaultValue={
    editImpLimit || 1} /></div></Form.Item><Form.Itemname="two_second"style={
    {
     display: 'inline-block' }}><div><label>Two-second:</label><Radio.Group onChange={
    onChangeRadio} value={
    editImpType || 1}  ><Radio value={
    1}>Male</Radio><Radio value={
    2}>Female</Radio></Radio.Group></div></Form.Item></div></Form.Item>

问题2：

< Form >默认提交事件 onFinish={onFinish}，无法获取到嵌套中的数据；

解决2：

从编辑事件中，把对应数据提升为共享数据。

问题3：

提升到共享的数据，无法被form.resetFields() 清除；

解决3：

在Modal取消事件中，把对应共享数据清空；

const handleCancel = () => {
    setVisible(false)setEditOne()setEditTwoFirst()setEditTwoSecond()
};

Modal中添加语句：destroyOnClose={true}
Form中添加语句：preserve={false}
(详见 Modal ，
< Modal /> 默认关闭后状态不会自动清空, 如果希望每次打开都是新内容，请设置 destroyOnClose。
< Modal /> 和 Form 一起配合使用时，设置 destroyOnClose 也不会在 Modal 关闭时销毁表单字段数据，需要设置。)

收尾：

在解决过程中得到了以下的帮助：

《【Antd4.x Form问题】[antd: Form.Item] children is array of render props cannot have name.》
Antd官网