why the createRef current always null in react

Question

I am developing a simple edit app page, because the form.item initial value did not update by data, so I want to setFieldsValue in the antd 4.x, this is my code looks like:

import React from 'react'
import { Modal, Input, Form } from 'antd'

export default function EditApp(props) {
    const { visible, rowData: data = {}, onVisibleChange, onEdit, dispatch } = props

    const [form] = Form.useForm()
    let formRef = React.createRef()
    if(formRef.current){
        formRef.current.setFieldsValue({
            remark: data?data.remark:''
        })
    }

    function onConfirm() {
        form.validateFields()
            .then(values => {
                let localValues = {
                    ...values,
                    appId: data.app_id
                }
                onEdit(localValues)
            })
            .catch(info => {
                console.log('Validate Failed:', info)
            })
    }

    function onCancel() {
        onVisibleChange()
    }

    return (
        <>
            <Modal title='Edit App' visible={visible} onOk={onConfirm} onCancel={onCancel}>
                <Form form={form} ref={formRef}>
                    <Form.Item
                        label='remark'
                        name='remark'
                        value={data?data.remark:''}
                        >
                        <Input placeholder='Please input remark' />
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}

To my surprise, the formRef.current is always null. Am I missing something? what should I do to make the Form.Item value update by data which passed from other component?

Answer 1

CreateRef work only with class components, you can use the hooks useRef if your react versions support it

 import React, {useRef} from 'react' import { Modal, Input, Form } from 'antd' export default function EditApp(props) { const { visible, rowData: data = {}, onVisibleChange, onEdit, dispatch } = props const [form] = Form.useForm() const formRef = useRef(); if(formRef.current){ formRef.current.setFieldsValue({ remark: data?data.remark:'' }) } function onConfirm() { form.validateFields().then(values => { let localValues = {...values, appId: data.app_id } onEdit(localValues) }).catch(info => { console.log('Validate Failed:', info) }) } function onCancel() { onVisibleChange() } return ( <> <Modal title='Edit App' visible={visible} onOk={onConfirm} onCancel={onCancel}> <Form form={form} ref={formRef}> <Form.Item label='remark' name='remark' value={data?data.remark:''} > <Input placeholder='Please input remark' /> </Form.Item> </Form> </Modal> </> ) }

Answer 2

this could fix it too:

React.useEffect(() => {
        form.setFieldsValue({
            remark:data?data.remark:''
        });
    });

when using useEffect, ref code should be removed.