es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo se accede a un registro dentro de la función de edición sin tener que usar ?

03 Jun, 2023 Programación

Tengo un <Ressource> declarado de la siguiente forma en App.tsx:

<Resource name="myresource" list={ListGuesser} edit={GenericEdit}/>

El código para GenericEdit:

const GenericEdit = function (props) {
    console.log('props', props);
    console.log('useResourceContext()', useResourceContext());
    console.log('useRecordContext()', useRecordContext());
    return (
        <>
            <Edit {...props}>
                <SimpleForm>
                    <TextInput disabled label="Id" source="id" />
                    <TextInput label="Nombre" source="name" />
                </SimpleForm>
            </Edit>
        </>)
};
export default GenericEdit;

La configuración predeterminada de <Edit><SimpleForm> funciona bien (es decir, los datos del registro se representan dentro del formulario), sin embargo, me gustaría poder usar los datos de registro de mi propia manera:

  • props solo contiene metadatos (ruta de URL, tipo de recurso, etc.) + ID de registro, pero no otros datos del registro
  • useResourceContext() devuelve el tipo de recurso (“campaign” en mi caso)
  • useRecordContext() no devuelve nada

P: ¿Cómo puedo acceder a los datos del registro dentro de mi función de edición (GenericEdit) sin tener que depender de la funcionalidad predeterminada de <SimpleForm>?

Tags:  

Answer

  1. Avatar for davy.ai
    davy.ai

    Dado que useRecordContext() no devuelve nada, sugiere que los datos de registro no se están pasando a GenericEdit. Una forma de acceder a los datos de registro sería proporcionar tu propia implementación de useRecordContext() que recupere los datos de registro del dataProvider. Podrías crear un nuevo hook llamado useMyRecordContext() que llame a useResourceContext() para obtener el tipo de recurso, y luego llame a dataProvider.getOne() para recuperar los datos de registro de ese recurso e ID. Luego podrías llamar a useMyRecordContext() dentro de GenericEdit para acceder a los datos de registro.

    Aquí hay una implementación de ejemplo de useMyRecordContext():

    import { useContext, useState, useEffect } from 'react';
import { useResourceContext } from 'react-admin';
import { DataProviderContext } from 'ra-core';

const useMyRecordContext = (props) => {
    const resource = useResourceContext();
    const dataProvider = useContext(DataProviderContext);
    const { id } = props;
    const [record, setRecord] = useState(null);

    useEffect(() => {
        async function fetchData() {
            const { data } = await dataProvider.getOne(resource, { id });
            setRecord(data);
        }

        fetchData();
    }, [resource, id, dataProvider]);

    return record;
};

export default useMyRecordContext;

    Luego puedes llamar a useMyRecordContext() dentro de GenericEdit de esta manera:

    const GenericEdit = function (props) {
    const record = useMyRecordContext(props);

    return (
        <>
            <div>ID de registro: {props.id}</div>
            <div>Nombre de registro: {record ? record.name : 'Cargando...'}</div>

    );
};

export default GenericEdit;

    Esta implementación recupera los datos de registro en el montaje utilizando dataProvider.getOne(), y los devuelve a través de la variable record. Luego puedes usar estos datos para renderizar tus propias entradas de formulario personalizadas, en lugar de depender de la funcionalidad predeterminada de SimpleForm.

Comments are closed.