React Adminでサーバーサイドバリデーション

dataProvider ミューテーションによって返されたエラーを検証のソースとして使用できます。検証エラーを表示するには、カスタム save 保存関数を使用する必要があります。

import * as React from 'react';
import { useCallback } from 'react';
import { Create, SimpleForm, TextInput, useCreate, useRedirect, useNotify } from 'react-admin';

export const UserCreate = () => {
    const redirect = useRedirect();
    const notify = useNotify();

    const [create] = useCreate();
    const save = useCallback(
        async values => {
            try {
                await create(
                    'users',
                    { data: values },
                    { returnPromise: true }
                );
                notify('ra.notification.created', {
                    type: 'info',
                    messageArgs: { smart_count: 1 },
                });
                redirect('list');
            } catch (error) {
                if (error.body.errors) {
                    // The shape of the returned validation errors must match the shape of the form
                    return error.body.errors;
                }
            }
        },
        [create, notify, redirect]
    );

    return (
        <Create>
            <SimpleForm onSubmit={save}>
                <TextInput label="First Name" source="firstName" />
                <TextInput label="Age" source="age" />
            </SimpleForm>
        </Create>
    );
};