¿Cómo puedo mostrar un mensaje de error personalizado desde la validación del lado del servidor en el paquete React Admin?

Este equipo especializado despúes de ciertos días de trabajo y de recopilar de datos, dieron con los datos necesarios, esperamos que te resulte útil en tu trabajo.

Solución:

Si está usando SimpleForm, puede usar asyncValidate Juntos con asyncBlurFields como se sugiere en un comentario en el número 97. No utilicé SimpleForm, así que esto es todo lo que puedo decirles al respecto.

He usado un simple form. Y también puede usar la validación del lado del servidor allí. Así es como lo he hecho. Un ejemplo completo y funcional.

import React from 'react';
import PropTypes from 'prop-types';
import  Field, propTypes, reduxForm, SubmissionError  from 'redux-form';
import  connect  from 'react-redux';
import compose from 'recompose/compose';
import  CardActions  from 'material-ui/Card';
import Button from 'material-ui/Button';
import TextField from 'material-ui/TextField';
import  CircularProgress  from 'material-ui/Progress';
import  CREATE, translate  from 'ra-core';
import  dataProvider  from '../../providers'; // <-- Make sure to import yours!

const renderInput = (
    meta:  touched, error  = ,
    input:  ...inputProps ,
    ...props
) => (
    
);

/**
 * Inspired by
 * - https://redux-form.com/6.4.3/examples/submitvalidation/
 * - https://marmelab.com/react-admin/Actions.html#using-a-data-provider-instead-of-fetch
 */
const submit = data =>
    dataProvider(CREATE, 'things',  data:  ...data  ).catch(e => 
        const payLoadKeys = Object.keys(data);
        const errorKey = payLoadKeys.length === 1 ? payLoadKeys[0] : '_error';
        // Here I set the error either on the key by the name of the field
        // if there was just 1 field in the payload.
        // The `Field` with the same `name` in the `form` wil have
        // the `helperText` shown.
        // When multiple fields where present in the payload, the error  message is set on the _error key, making the general error visible.
        const errorObject = 
            [errorKey]: e.message,
        ;
        throw new SubmissionError(errorObject);
    );

const MyForm = ( isLoading, handleSubmit, error, translate ) => (
    

        

            

                
            
        
        
            
                isLoading && 
                Signin
            
            error && General error: translate(error)
        
    
);
MyForm.propTypes = 
    ...propTypes,
    classes: PropTypes.object,
    redirectTo: PropTypes.string,
;

const mapStateToProps = state => ( isLoading: state.admin.loading > 0 );

const enhance = compose(
    translate,
    connect(mapStateToProps),
    reduxForm(
        form: 'aFormName',
        validate: (values, props) => 
            const errors = ;
            const  translate  = props;
            if (!values.email)
                errors.email = translate('ra.validation.required');
            return errors;
        ,
    )
);

export default enhance(MyForm);

Si el código necesita más explicación, deje un comentario a continuación e intentaré explicarlo.

Esperaba poder realizar la acción de la solicitud REST enviando una acción con los efectos secundarios onSuccess y onFailure como se describe aquí, pero no pude hacer que funcionara junto con SubmissionError.

Aquí una solución más del repositorio oficial. https://github.com/marmelab/react-admin/pull/871 Debe importar HttpError (mensaje, estado, cuerpo) en DataProvider y lanzarlo. Luego, en errorSaga, analiza el cuerpo para reducir la estructura de forma. Eso es todo. Disfrutar.

Encontré una solución de trabajo para reaccionar-admin 3.8.1 eso parece funcionar bien.

Aquí está el código de referencia.

Ejemplo:

Primero haga que el ayudante funcione según sea necesario.

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
const simpleMemoize = fn => 
  let lastArg;
  let lastResult;
  return arg => 
    if (arg !== lastArg) 
      lastArg = arg;
      lastResult = fn(arg);
    
    return lastResult;
  ;
;

Entonces el código de validación real

const usernameAvailable = simpleMemoize(async value => 
  if (!value) 
    return "Required";
  
  await sleep(400);
  if (
    ~["john", "paul", "george", "ringo"].indexOf(value && value.toLowerCase())
  ) 
    return "Username taken!";
  
);

Finalmente conéctelo a su campo:

const validar nombre de usuario = [required(), maxLength(10), abbrevUnique];

const UserNameInput = (props) => 
    return (
        
        );

Si te apasiona la programación, tienes la opción de dejar una reseña acerca de qué te ha gustado de este tutorial.

---

---

Utiliza Nuestro Buscador