-1

cuando doy click al boton de eliminar no hace nada y eliminar el producto introducir la descripción de la imagen aquí

mi codigo:

import axios from "axios"

const API_URL = import.meta.env.VITE_API_URL;

const getProducts = async () => {
  try {
    const response = await axios.get(API_URL + "/api/products")
    return response.data
  } catch (error) {
    throw error
  }
}

const addProduct = async (newProduct) => {
  try {
    const response = await axios.post(API_URL + "/api/products", newProduct)
    return response.data
  } catch (error) {
    throw error
  }
}


const deleteProduct = async (productId) => {
  if (!productId) {
      console.error("No se proporcionó un ID de producto válido para eliminar.");
  }

  try {
      const response = await axios.delete(`${API_URL}/api/products/${productId}`);
      console.log(`Producto con ID ${productId} eliminado exitosamente.`);
      return response.data; //Mostramos los datos si es necesario
  } catch (error) {
      if (error.response) {
          console.error(`Error en la respuesta del servidor (HTTP ${error.response.status}):`,error.response.data);
      } else if (error.request) {
          console.error("No se recibió respuesta del servidor:", error.request);
      } else {
          //Otros tipo de errores
          console.error("Error al realizar la solicitud:", error.message);
      }
  }
};

export { getProducts, addProduct, deleteProduct }

import { useEffect, useState } from 'react'
import { addProduct, getProducts, deleteProduct } from './services/api.js'
import { AddProduct } from "./components/AddProduct.jsx"
import { ProductList } from "./components/ProductList.jsx"

function App() {
  const [products, setProduct] = useState([]);

  const fetchProducts = async () => {
    try {
      const data = await getProducts();
      setProduct(data);
    } catch (error) {
      console.error("Error al consumir los productos:", error.message);
    }
  };

  useEffect(() => {
    fetchProducts();
  }, []);

  const handleAddProduct = async (newProduct) => {
    try {
      const addedProduct = await addProduct(newProduct);
      setProduct((prevProducts) => [...prevProducts, addedProduct]);
    } catch (error) {
      console.error("Error al guardar el producto :(");
    }
  };




  const handleDeleteProduct = async (productId) => {
    if (!productId) {
        console.error("handleDeleteProduct: El ID obtenido no es válido.");
        return;
    }

    try {
        await deleteProduct(productId);
        setProduct((prevProducts) =>
            prevProducts.filter((product) => product.id !== productId)
        );
        console.log(`Producto con ID ${productId} eliminado correctamente.`);
    } catch (error) {
        // Manejo detallado de errores
        if (error.response) {
            console.error(
                `Error en la respuesta del servidor (HTTP ${error.response.status}):`,
                error.response.data
            );
        } else {
            console.error("Error en la solicitud:", error.message);
        }
    }
};

  return (
    <>
      <div
        className="container"
      >
        <div>
          <h1 className="title is-1 has-text-centered mb-6">Lista de productos</h1>
          <AddProduct handleAddProduct={handleAddProduct} />
          <ProductList
            products={products}
            handleDeleteProduct={handleDeleteProduct} // Pasar la función de eliminación
          />
        </div>
      </div>
    </>
  );
}

export default App;

import React from "react";
import "../components/ProductList.css";

const ProductList = ({ products, handleDeleteProduct }) => {
  return (
    <div className="container">
      <div className="columns is-multiline">
        {products.map((product, index) => (
          <div key={index} className="column is-one-third mt-6">
            <div className="card">
              {/* Sección de imagen */}
              <div className="card-image">
                <figure className="image is-4by3">
                  <img src="/imgproducts.jpg" alt={product.name} />
                </figure>
              </div>
              {/* Contenido del producto */}
              <div className="card-content">
                <p className="title">{product.name}</p>
                <p className="subtitle mt-5 has-text-danger-light">
                  {product.description}
                </p>
                <div className="content">
                  <strong className="has-text-success">Price:</strong>{" "}
                  <strong className="has-text-white">${product.price}</strong>
                  <br />
                  <strong className="has-text-warning">Stock:</strong>{" "}
                  <strong className="has-text-white">
                    {product.stock} disponible
                  </strong>
                </div>
              </div>
              {/* Botones */}
              <footer className="card-footer">
              <button
    className="button is-danger card-footer-item"
    onClick={() => {
        console.log("Producto enviado al eliminar:", product._id); //Solo para depuración
        handleDeleteProduct(product._id); //IMPORTANTE, la variable es _id y no solamente id como habiamos pensado
    }}
>
    Eliminar
</button>
                <button className="button is-primary card-footer-item">Editar</button>
              </footer>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export { ProductList };
18
  • Esta pregunta difiere de la anterior, ya que anteriormente solo tenia un problema con una asignación de ID. No tenía un control de errores, y esta pregunta es producto de esos cambios. Ahora muestra un 404 que es totalmente diferente al problema anterior de la variable unsigned.
    – Excorpion
    Commented el 20 nov. a las 22:03
  • okey¿¿ y que hago entonces que codigo te paso Commented el 20 nov. a las 22:05
  • Primero veamos si con los cambios logramos reabrir la pregunta... mientras revisaré que puede ser el error que tienes ahora.
    – Excorpion
    Commented el 20 nov. a las 22:06
  • bueno yo puse eso y me tiro en la consola ese mensaje hasta ahi llegue yo, ya despues yo no toque mas nada y saque cap de eso y listo Commented el 20 nov. a las 22:08
  • Mira la URL que está dando el error, expandela si puedes. Por que no veo el localhost yo, y tu verifica que la URL sea correcta para tu API. No tienes Postman para probar la url directo o si ?
    – Excorpion
    Commented el 20 nov. a las 22:09

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.