Не удается прочитать свойство 'getFieldDecorator' из неопределенного, так как я пытаюсь использовать форму antd внутри компонента

Question

Я пытаюсь использовать antd's form с машинописью.Я не уверен, что я делаю неправильно.Когда я пытаюсь выполнить рендеринг компонента, я получаю сообщение об ошибке:

TypeError: Cannot read property 'getFieldDecorator' of undefined

Это происходит в первой строке метода рендеринга:

const { getFieldDecorator } = this.props.form;

Почему form не определено с компонентамиthis.props?Я попытался прочитать, но не смог получить точную причину этой ошибки.

   import React from "react";
   import { Button, Input, message, Form, Radio } from "antd";
   import { FormComponentProps } from "antd/lib/form/Form";
   import { withWideContainer, withHeader } from "client/components/WithContainer";

    const FormItem = Form.Item;


    type state = {};

    type props = {};

    class CleaningLimitPolicies extends React.Component<
    FormComponentProps & props,
    state
    > {
        constructor(props) {
            super(props);

            this.state = {};
        }

        afterValid() {}

        render() {

            // FOLLOWING LINE THROWS THE ERROR

            const { getFieldDecorator } = this.props.form;

            const view = (
            <div className="d-flex align-items-start">
                <Form onSubmit={this.afterValid}>
                <FormItem label="Use Microbial Limits?">
                    {getFieldDecorator("use_microbial_limits", {
                    rules: [
                        {
                        required: true,
                        message: "Please fill out this field"
                        }
                    ],
                    initialValue: true
                    })(
                    <Radio.Group>
                        <Radio value={true}>Yes</Radio>
                        <Radio value={false}>No</Radio>
                    </Radio.Group>
                    )}
                </FormItem>
                <Button
                    type="primary"
                    htmlType="submit"
                    style={{ display: "none" }}
                />
                </Form>
            </div>
            );

            return withWideContainer(view);
        }
    }

    const CleaningLimitPolicy = withHeader(
        CleaningLimitPolicies,
        "Policy",
        true
    );

    export default CleaningLimitPolicy;

Вышеуказанный компонент экспортирован и визуализирован из другого компонента.Почему я могу получить эту ошибку?

Answer 1

Вам нужно обернуть свой компонент с помощью Antd Form.create (), как показано ниже:

CleaningLimitPolicy = Form.create(name : "yourFormName")(CleaningLimitPolicy)
export default CleaningLimitPolicy;