为什么 createRef 当前在反应中总是 null

Question

我正在开发一个简单的编辑应用程序页面，因为form.item初始值没有被数据更新，所以我想在antd 4.x中setFieldsValue，这是我的代码如下：

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

令我惊讶的是，formRef.current 始终为空。我错过了什么吗？我应该怎么做才能通过从其他组件传递的数据更新 Form.Item 值？

Answer 1

CreateRef 仅适用于 class 组件，如果你的 React 版本支持它，你可以使用挂钩 useRef

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

这也可以解决它：

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

使用 useEffect 时，应删除引用代码。

为什么 createRef 当前在反应中总是 null

why the createRef current always null in react

javascript

reactjs

antd