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 内有多个元素的使用方式。只会对它的直接子元素绑定表单功能，例如直接包裹了 Input/Select。如果控件前后还有一些文案或样式装点，或者一个表单项内有多个控件，你可以使用内嵌的 Form.Item 完成。你可以给 Form.Item 自定义 style 进行内联布局，或者添加 noStyle 作为纯粹的无样式绑定组件（类似 3.x 中的 getFieldDecorator）。

- 
-   < Input />
- 
+ 
+    // 直接包裹才会绑定表单
+   description
+

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

Address：有两个控件，在 Form.Item 内使用两个分别绑定对应控件。

BirthDate：有两个内联控件，错误信息展示各自控件下，使用两个分别绑定对应控件，并修改 style 使其内联布局。

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

实例：

const onChangeChecked = (checked) => {
      setRefreshType(checked)
}



    
        
    

    
        
            One-first:
            
             minutes
        
    
    



    
        
    

    
        
            
                Two-first:
                
            
        

        
            
                Two-second:
                
                    Male
                    Female

问题2：

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

解决2：

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

问题3：

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

解决3：

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

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

Modal中添加语句：destroyOnClose={true}
(详见 Modal ，< Modal /> 默认关闭后状态不会自动清空, 如果希望每次打开都是新内容，请设置 destroyOnClose。)

收尾：

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

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