javascript - 类型错误 : Cannot read property 'getFieldDecorator' of undefined in react comoponent

Question

我有这个错误:

> TypeError: Cannot read property 'getFieldDecorator' of undefined
> _class.render src/containers/RegisterTenant/register.js:81   78 |     this.setState({ 'selectedFiles': files });   79 | }   80 |  
> > 81 |   render(){   82 |     const { data } = this.state;   83 |     const { rowStyle, colStyle, gutter } = basicStyle;   84 |     const {
> getFieldDecorator } = this.props.form; View compiled ▶ 18 stack frames
> were collapsed. AsyncFunc._callee$ src/helpers/AsyncFunc.js:26   23 |
> const { default: Component } = await importComponent();   24 |
> Nprogress.done();   25 | if (this.mounted) {
> > 26 |   this.setState({   27 |     component: <Component {...this.props} />   28 |   });   29 | }

我只是想使用ant design放置一个包含3个字段的表单，我的 react 组件是这样的:

import React, { Component } from 'react';
import { Row, Col } from 'antd';
import PageHeader from '../../components/utility/pageHeader';
import Box from '../../components/utility/box';
import LayoutWrapper from '../../components/utility/layoutWrapper.js';
import ContentHolder from '../../components/utility/contentHolder';
import basicStyle from '../../settings/basicStyle';
import IntlMessages from '../../components/utility/intlMessages';
import { adalApiFetch } from '../../adalConfig';
import { Input } from 'antd';
import Form from '../../components/uielements/form';
import Checkbox from '../../components/uielements/checkbox';
import Button from '../../components/uielements/button';
import Notification from '../../components/notification';
const FormItem = Form.Item;

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {TenantId: '', TenantUrl: '', CertificatePassword: '' };
    this.handleChangeTenantUrl = this.handleChangeTenantUrl.bind(this);
    this.handleChangeCertificatePassword = this.handleChangeCertificatePassword.bind(this);
    this.handleChangeTenantId= this.handleChangeTenantId.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  };


  handleChangeTenantUrl(event){
    this.setState({TenantUrl: event.target.value});
  }

  handleChangeCertificatePassword(event){
    this.setState({CertificatePassword: event.target.value});
  }

  handleChangeTenantId(event){
    this.setState({TenantId: event.target.value});
  }

  handleSubmit(event){
    event.preventDefault();

    let data = new FormData();
    //Append files to form data
    data.append("model", JSON.stringify({ "TenantId": this.state.TenantId, "TenantUrl": this.state.TenantUrl, "CertificatePassword": this.state.CertificatePassword }));
    //data.append("model", {"TenantId": this.state.TenantId, "TenantUrl": this.state.TenantUrl, "TenantPassword": this.state.TenantPassword });

    let files = this.state.selectedFiles;
    for (let i = 0; i < files.length; i++) {
      data.append("file", files[i], files[i].name);
    }

    const options = {
      method: 'put',
      body: data,
      config: {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
    };

    adalApiFetch(fetch, "/Tenant", options)
      .then(response => response.json())
      .then(responseJson => {
        if (!this.isCancelled) {
          this.setState({ data: responseJson });
        }
      })
      .catch(error => {
        console.error(error);
      });
  }


  upload(e){
    let files = e.target.files;
    this.setState({ 'selectedFiles': files });
}

  render(){
    const { data } = this.state;
    const { rowStyle, colStyle, gutter } = basicStyle;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 14,
          offset: 6,
        },
      },
    };

    return (
      <div>
        <LayoutWrapper>
        <PageHeader>{<IntlMessages id="pageTitles.TenantAdministration" />}</PageHeader>
        <Row style={rowStyle} gutter={gutter} justify="start">
          <Col md={12} sm={12} xs={24} style={colStyle}>
            <Box
              title={<IntlMessages id="pageTitles.TenantAdministration" />}
              subtitle={<IntlMessages id="pageTitles.TenantAdministration" />}
            >
              <ContentHolder>
              <Form onSubmit={this.handleSubmit}>
                <FormItem {...formItemLayout} label="Tenant id" hasFeedback>
                  {getFieldDecorator('tenantid', {
                    rules: [
                      {
                        required: true,
                        message: 'Please input your tenant id',
                      },
                    ],
                  })(<Input name="tenantid" id="tenantid" />)}
                </FormItem>
              </Form>
              <form onSubmit={this.handleSubmit}>
                <label>
                  TenantId:
                  <input type="text" value={this.state.TenantId} onChange={this.handleChangeTenantId} />
                </label>
                <label>
                  TenantUrl:
                  <input type="text" value={this.state.TenantUrl} onChange={this.handleChangeTenantUrl} />
                </label>
                <label>
                  TenantPassword:
                  <input type="text" value={this.state.CertificatePassword} onChange={this.handleChangeCertificatePassword} />
                </label>
                <label>
                  Certificate:
                  <input onChange = { e => this.upload(e) } type = "file" id = "files" ref = { file => this.fileUpload } />
                </label>             
              <input type="submit" value="Submit" />
              </form>
              </ContentHolder>
            </Box>
          </Col>
        </Row>
      </LayoutWrapper>
      </div>
    );
  }
}

Answer 1

您似乎错过了将表单包装到 Form.create HOC 中(doc - 检查示例):

class MyForm extends Component { ... }
export default Form.create()(MyForm);