wrappedComponentRef не определен - Реагирует на Ant Design, Компонент формы

Question

Я использую Ant design - формы и модальные компоненты с React.

Компонент обертки формы:

class InsertForm extends React.Component{
    render(){
        const formItemLayout = {
            labelCol: { span: 24 },
            wrapperCol: { span: 24},
        };
        const { getFieldDecorator } = this.props.form;
        return (
            <div>
                <Form.Item
                    {...formItemLayout}
                    label="Title"
                >
                    {getFieldDecorator('title', {

                    })(
                        <Input placeholder="Title" />
                    )}
                 </Form.Item>
......
            </div>
        )
    }
}
const InsertFormWrapper = Form.create()(InsertForm);

Я вызываю этот компонент в другом компоненте в том же файле (поэтому я не экспортирую компонент формы) внутри Modal и я использую wrappedComponentRef:

export default class InsertCont extends React.Component{
    constructor(props){
        super(props);
        console.log(this.form) // Undefined
    }
    insert = () => {
            console.log(this.form); // Not undefined
        }
    render(){
        <Modal
            ...{modalProps}
            onOk={this.insert}
        >
            <InsertFormWrapper
                wrappedComponentRef={(form) => this.form = form}
            />
        </Modal>
    }
}

Проблема в том, что в конструкторе ссылка this.form не определено, но если модальное окно открыто и нажата кнопка ОК - onOk={this.insert} ссылка не является неопределенной.

Answer 1

Причина, по которой он не определен в конструкторе, заключается в том, что когда вы попадаете в конструктор, ваш код только определил InsertCont, но еще не звонил render(), где wrappedComponentRef наборы this.form

Пожалуйста, обратитесь к React Lifecycle: Mounting, чтобы понять, почему это так. Когда создается любой компонент React, это порядок вызова функций:

1. constructor()
2. static getDerivedStateFromProps()
3. render()
4. componentDidMount()

Answer 2

Кстати, я не полностью рассмотрел вашу проблему или код, но у меня была такая же проблема, и я решил ее, поэтому я думаю, что знаю, что не так.

Вы не можете передавать компоненты с оболочками в другие компоненты. Я думаю, это должен быть отдельный маршрут (вBrowserRouter).

Это означает, что проблема в компоненте оболочки... здесь ->

const InsertFormWrapper = Form.create()(InsertForm);

затем используя его при рендеринге InsertCont компонент... здесь ->

render() {
        <InsertFormWrapper
            wrappedComponentRef={(form) => this.form = form}
        />
    </Modal>
}

У вас есть пара решений

• удалите обертку и найдите другой способ реализовать то, что вам нужно
• как-нибудь сделать компонент его собственным маршрутом
• выбросить весь компонент в корзину

Выбирай с умом;)