Estoy desarrollando una página de aplicación de edición simple, porque el valor inicial de form.item no se actualizó por datos, por lo que quiero establecerFieldsValue en setFieldsValue 4.x, este es mi código:
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> </> ) } Para mi sorpresa, formRef.current siempre es nulo. ¿Me estoy perdiendo de algo? ¿Qué debo hacer para que el valor de Form.Item se actualice con los datos que pasaron de otro componente?
CreateRef funciona solo con componentes de clase, puede usar los ganchos useRef si sus versiones de reacción lo admiten
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> </> ) }esto también podría solucionarlo:
React.useEffect(() => { form.setFieldsValue({ remark:data?data.remark:'' }); });al usar useEffect, se debe eliminar el código de referencia.