警告：validateDOMNesting（...）：<form>不能显示为的后代

Question

在reactjs中，我正在使用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