why the createRef current always null in react

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

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>
        </>
    )
}