Блог

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

 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 amp; 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;
  

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

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

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