A continuación, se envía una solicitud de axios al servidor para el envío de datos y, a cambio, recibo errores de validación, si los hay.
const storeExpense = async (expenseData) => { const response = await axios.post('/api/expenses/store/', expenseData).catch(function (error) { if (error.response) { return error.response.data; } else if (error.request) { console.log(error.request); } else { console.log('Error', error.message); } }); return response; }En otro componente, almaceno retorno en variable,
const response = await storeExpense(values) if('errors' in response) { setValErrors(Object.values(response)) setStatus({ success: false }); setErrors({ submit: response.errors }); setSubmitting(false); setRequestStatus(true) }A continuación se muestra la respuesta de retorno, es una matriz y con objetos.
Array [ "The given data was invalid.", {…} ] 0: "The given data was invalid." 1: Object { expense_description: (1) […], accountcustomtype_id: (1) […], expense_date: (1) […], … } accountcustomtype_id: Array [ "Expense account is required." ] expense_amount: Array [ "Expense amount is required." ] expense_date: Array [ "Expense date is required." ] expense_description: Array [ "Expense description is required." ] paymentoption_id: Array [ "Payment with is required." ] taxgroup_id: Array [ "Tax is required." ]¿Cómo puedo imprimir cada mensaje de error de validación? con .mapa()?
Gracias,
Actualizado después del comentario de @rjcode
Puede intentar obtener todos los errores como una matriz como esta:
const errorsArr = [].concat(...Object.values(responce[1])) Y después de eso, puede imprimir todos los errores de esta matriz en <li> , como ejemplo:
const responce = ["The given data was invalid.", { expense_description: ["Expense account is required."], accountcustomtype_id: ["Expense account is required."], expense_date: ["Expense date is required."], paymentoption_id: ["Payment with is required."], taxgroup_id: ["Tax is required."] } ] const errorsArr = [].concat(...Object.values(responce[1])) class LoopThrough extends React.Component { render() { return ( <div> {this.props.errors.map(error => ( <li key={error} >{error}</li> ))} </div> ); } } ReactDOM.render( <LoopThrough errors={errorsArr} />, document.getElementById('container') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="container"> </div>const response = await storeExpense(values) if('errors' in response){ const errorsList = responce.errors[1]; const errors = Object.keys(errorsList).map(k =>errorsList[k].join('')) setErrors({ submit: errors }); ... };