react+antd form表单项动态添加数据的实现

需求效果功能如图：

代码：

 <Form.Item
                            label="关联链接"
                            vvspan={24}
                            labelCol={{ md: 3 }}
                            wrapperCol={{ md: 21 }}
                            style={{ marginBottom: '0' }}
                        >
                            <span
                                style={{
                                    color: urlList.length < 20 ? '#FFA22D' : 'rgba(0, 0, 0, 0.25)',
                                    cursor: 'pointer'
                                }}
                                onClick={add}
                            >
                                添加链接
                            </span>
                        </Form.Item>
                        <Col vvspan={24} offset={3} className={styles.relateLinkList}>
                            {urlList.map(k => (
                                <Form.Item vvspan={24} labelCol={{ md: 3 }} wrapperCol={{ md: 21 }}>
                                    <div key={k} style={{ position: 'relative' }}>
                                        {getFieldDecorator(`relateLinkList[${k}]`, {
                                            validateTrigger: ['onBlur'],
                                            rules: [
                                                {
                                                    min: 1,
                                                    max: 2000,
                                                    message: '不可超过2000字'
                                                },
                                                {
                                                    pattern: /^(ht|f)tps?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?([a-zA-Z0-9_-]|#|%)(\?)?)*)*$/i,
                                                    message: '请输入有效网址！'
                                                }
                                            ]
                                        })(
                                            <Input
                                                style={{ width: '100%', paddingRight: '30px', boxSizing: 'border-box' }}
                                            />
                                        )}
                                        <i
                                            className="icon iconfont iconshanchu"
                                            style={{
                                                position: 'absolute',
                                                right: '12px',
                                                top: '0',
                                                cursor: 'pointer',
                                                color: '#333333'
                                            }}
                                            onClick={() => remove(k)}
                                        />
                                    </div>
                                </Form.Item>
                            ))}
                        </Col>

　　备注：这里遍历重新添加form.item的原因是加了网址校验，如果只遍历getFieldDecorator，校验只校验第一条数据

方法：

    const remove = k => {
        setUrlList(urlList.filter(key => key !== k));
    };

    const add = () => {
        const keys = form.getFieldValue('relateLinkList');
        if (urlList.length < 20) {
            if ((keys && keys[keys.length - 1]) || keys === undefined) {
                const nextKeys = urlList.concat(urlList.length + 1);
                setUrlList(nextKeys);
            }
        } else {
            message.error('上限20个');
        }
    };

　　数据提交的校验：

  const newLinkList = values.relateLinkList && values.relateLinkList.filter(item => !!item);
                    const params = {
                        ...values,
                        id: 0,
                        relateLinkList: newLinkList,
                    };
                    const result = await launchTask(params);
                    if (result.code === 10000) {
                        message.success(result.msg);
                        router.goBack();
                        pageTabUtil.closeTab('/work/task/addTask');
                    } else {
                        message.error(result.msg);
                    }