Предупреждение: validateDOMNesting (...): <form>не может отображаться как потомок <form>

Question

В реакции я использую библиотеку ant-design для формы.В консоли я сталкиваюсь с этой проблемой:

Warning: validateDOMNesting(...): <form> cannot appear as a descendant of <form>

Может кто-нибудь показать мне, какую ошибку я допустил в своем коде?

код

import React, { component } from 'react';
import styled from 'styled-components';
import 'antd/dist/antd.css';
import './FirstStep.css';
import { Form, Input } from 'antd';
class RegisterStepOne extends React.Component {

  render() {
    const { getFieldDecorator } = this.props;
    return (
      <div>
        <FormCard>
          <Form onSubmit={this.handleSubmit} className="login-form">
            <FormItem>
              {getFieldDecorator('firstName', {
                rules: [
                  {
                    required: true,
                    message: 'Please input your First name!',
                    whitespace: true,
                  },
                ],
              })(<Input placeholder="First name" />)}
            </FormItem>
            <FormItem>
              {getFieldDecorator('lastName', {
                rules: [
                  {
                    required: true,
                    message: 'Please input your Last name!',
                    whitespace: true,
                  },
                ],
              })(<Input placeholder="Last name" />)}
            </FormItem>
            <FormItem>
              {getFieldDecorator('email', {
                rules: [
                  {
                    type: 'email',
                    message: 'The input is not valid E-mail!',
                  },
                  {
                    required: true,
                    message: 'Please input your E-mail!',
                  },
                ],
              })(<Input placeholder="Email" />)}
            </FormItem>
            <FormItem>
              {getFieldDecorator('lastPosition', {
                rules: [
                  {
                    required: true,
                    message: 'Please input your Last Position!',
                    whitespace: true,
                  },
                ],
              })(<Input placeholder="Present or last position" />)}
            </FormItem>
            <FormItem>
              {getFieldDecorator('lastCompany', {
                rules: [
                  {
                    required: true,
                    message: 'Please input your Last Company!',
                    whitespace: true,
                  },
                ],
              })(<Input placeholder="Present or last Company" />)}
            </FormItem>
          </Form>
        </FormCard>
      </div>
    );
  }
}
export default RegisterStepOne;

Answer 1

Глядя на скриншот консоли, можно предположить, что <RegisterStepOne /> - это дочерний элемент <form> где-то выше дерева компонентов.

Вы видите ошибку, потому что ваш DOM отображает что-то вроде этого

<form>
  <div>
    <form>
      <input />
    </form>
  </div>
</form>

Недопустимый HTML