1

Estoy trabajando con react de lado del cliente y con express y mysql de lado del servidor. La petición al backend esta funcionando bien, el producto es creado correctamente y lo muestra en pantalla, pero no muestra el mensaje de success, al igual que el de error.

   import axios from "axios";
import React from "react";
import  { useState } from "react";
import Swal from 'sweetalert'


const ProductsAdd = () =>{
    
    const[product, setProduct] = useState({
        id: "",
        clave: "",
        nombre: "",
        descripcion: ""
    });

    const handleOnChange = (e) => {
        setProduct({...product, [e.target.name]: e.target.value});
      
    }
    const onsubmit = async (e) => {
        e.preventDefault();
        console.log(product);

        try{
            const post = await axios.post('http://localhost:4000/api/products',{product})
            Swal('Producto agregado correctamente');

        }catch(e){   
            Swal('error');
        }

    }
6
  • Considera incluir el código o algún snippet que podamos replicar. Las imágenes de código hay que tratar de evitarlas :) el 2 sep. 2021 a las 21:09
  • La consola te lanza algún error? Replique tu código y me funciona bien el 2 sep. 2021 a las 21:28
  • No manda ningún error, lo único es que no muestra la animación o mensaje de success o error en la pagina web, una vez agregado el producto. Por parte del servidor si captura el error, cuando no se llena ningún dato del formulario o se repite un Id, y manda el mensaje por consola, pero en el frontend no lo muestra en la pagina ni tampoco en consola. el 2 sep. 2021 a las 21:37
  • No está demás preguntar pero realizaste el npm i de sweetalert me imagino.. porque yo cree un sandbox y me funcionó de inmediato :( el 2 sep. 2021 a las 21:41
  • exactamente que es un sandbox? jeje el 2 sep. 2021 a las 21:59

2 respuestas 2

0

creo deberia considerar hacer una funcion que haga las peticiones de axios y asi evites repetir codigo por ejemplo asi y te deberia de servir. en el response.Message deberia estar el mensaje de error

 const PostInfo = async (path, body) => {
  return await axios.post(`${route}/${path}`, body).catch(function (error) {
    if (error.response) {
      return error.response.data;
    } else if (error.request) {
      return error.request;
    } else {
      return error.message;
    }
  });
0

intenta usar

import Swal from 'sweetalert2'

try{
 const post = await axios.post('http://localhost:4000/api/products',{product})
 Swal.fire(
  'Good job!',
  'You clicked the button!',
  'success'
)

}catch(e){   
 Swal.fire({
  icon: 'error',
  title: 'Oops...',
  text: 'Something went wrong!',
  footer: '<a href="">Why do I have this issue?</a>'
})
 }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.