(Решено) Метод onSave React-admin не передает значения формы

Question

Я работаю над приложением React и использую фреймворк react-admin.

Мне нужно предварительно обработать данные, поступающие из формы, учитывая, что мне нужны отдельные таблицы для нового сотрудника и их адреса, но я не хочу разбивать их на два экрана.

Я нашел раздел Using onSave To Alter the Form Submission Behavior в документации Create / Edit View Create-Edit и применил его к своему коду (пример ниже) в надежде, что он позволит мне обработать данные, прежде чем попасть в dataProvider. К сожалению, я не могу вывести данные из формы в обратный вызов для CreateEntity кнопочного модуля.

Создать представление

const CreateActions = props => (
    <TopToolbar {...props}>
        <CreateEntityButton props={props} variant="contained" label={"Create"}/>
    </TopToolbar>
);

const EmployeeCreate = props => (
    <Create {...props} >
    <TabbedForm toolbar={<CreateActions record={props.record} redirect="show" />}>
        <FormTab label="Identity">
            <span >
                <PersonInput />
            </span>
        </FormTab>
        <FormTab label="Address">
            <span >
                <AddressInput />
            </span>
        </FormTab>
    </TabbedForm>
    </Create>
)

export default TequitiEmployeeCreate;

Когда я прохожу через логи c в браузере, функция обратного вызова в методе handleSave (ниже) передает undefined для параметров values и redirect. Я ожидал, что объект values будет содержать все входные значения из TabbedForm, чтобы его можно было проанализировать и затем передать в мой модуль dataProvider.

CreateEntityButton logi c:

    const CreateEntityButton = ({  ...props}) => {
    const [create] = useCreate(props.props.resource);
    const redirectTo = useRedirect();
    const notify = useNotify();
    const { basePath } = props;

    const handleSave = useCallback(
        (values, redirect) => { // <-------- undefined all the time
            console.log(values);
            console.log(redirect);
            create(
                {
                    payload: { data: { ...values } },
                },
                {
                    onSuccess: ({ data: newRecord }) => {
                        notify('ra.notification.created', 'info', {
                            smart_count: 1,
                        });
                        redirectTo(redirect, basePath, newRecord.id, newRecord);
                    },
                }
            );
        },
        [create, notify, redirectTo, basePath]
    );

    return <SaveButton
        label={props.label}
        variant={props.variant}
        handleSubmitWithRedirect={handleSave}
    />;
};

Я подумал, что, возможно, в этом виноваты отдельные модули для PersonInput и AddressInput, но даже объединение всех этих компонентов в один не помогло.

Любой помощь / мысли будут полезны.

Answer 1

Оказывается, я смешивал пример и использовал handleSubmiutWithRedirect вместо действия onSave в SaveButton.

const CreateEntityButton = ({  ...props}) => {
        const resource = props.props.resource;
    const redirectTo = useRedirect();
    const notify = useNotify();
    const { basePath } = props.props;
    const dataProvider = useDataProvider();

    const handleSave = useCallback(
        (values) => {
            const createPerson =  new PersonAddressCreate(dataProvider);
            createPerson.create(values, resource)
                .then((data)=>{
                    notify('ra.notification.created', 'info', { smart_count: 1 });
                    redirectTo("show", basePath, data.id, data)
                })
                .catch((error)=>{
                    notify(error, 'error', { smart_count: 1 });
                })

        },
        [notify, redirectTo, basePath]
    );


    return <SaveButton
        {...props.props}
        label={props.label}
        variant={props.variant}
        onSave={handleSave}
    />;
};