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）。

1
2
3
4
5
6
7
- <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 内使用 去绑定对应子控件。

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

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

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

实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
const onChangeChecked = (checked) => {
      setRefreshType(checked)
}


<Form.Item
    label="One"
    valuePropName='checked'
    style={{ margin: 0 }}
>
    <Form.Item
        name="one"
        valuePropName='checked'
        style={{ display: 'inline-block', marginRight: '15%' }}
    >
        <Switch onChange={onChangeChecked} />
    </Form.Item>

    <Form.Item
        name="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.Item
    label="Two"
    style={{ margin: 0 }}
>
    <Form.Item
        name="two"
        valuePropName='checked'
        style={{ display: 'inline-block', marginRight: '15%' }}
    >
        <Switch onChange={onChangeCapping} />
    </Form.Item>

    <div style={{ display: 'inline-block' }}>
        <Form.Item
            name="two_first"
            style={{ display: 'inline-block' }}
        >
            <div>
                <label>Two-first:</label>
                <InputNumber min={0} defaultValue={editImpLimit || 1} />
            </div>
        </Form.Item>

        <Form.Item
            name="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取消事件中，把对应共享数据清空；

1
2
3
4
5
6
const handleCancel = () => {
        setVisible(false)
        setEditOne()
        setEditTwoFirst()
        setEditTwoSecond()
};

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

收尾：

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

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