0

cuando doy click al boton de eliminar no hace nada y quiero que se elimine por completo ese producto, como podria ser? ayuda

![introducir la descripción de la imagen aquí

este es 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) => {
  try {
    await axios.delete(API_URL + `/api/products/${productId}`)
  } catch (error) {
    throw error
  }
}

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) => {
    try {
      await deleteProduct(productId);
      
      setProduct((prevProducts) =>
        prevProducts.filter((product) => product.id !== productId)
      );
    } catch (error) {
      console.error("Error al eliminar el producto :(", error.message);
    }
  };

  return (
    <>
      <div
        className="container is-flex is-justify-content-center is-align-items-center"
        style={{ height: "300vh" }}
      >
        <div>
          <h1 className="title is-1 has-text-centered mb-6">Lista de productos</h1>
          <AddProduct handleAddProduct={handleAddProduct} />
          <ProductList
            products={products}
            handleDeleteProduct={handleDeleteProduct}
          />
        </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">
      
              <div className="card-image">
                <figure className="image is-4by3">
                  <img src="/public/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>
    
              <footer className="card-footer">
                <button
                  className="button is-danger card-footer-item"
                  onClick={() => handleDeleteProduct(product.id)} 
                >
                  Eliminar
                </button>
                <button className="button is-primary card-footer-item">Editar</button>
              </footer>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export { ProductList };

1 respuesta 1

0

Tienes un problema en deleteProduct, por alguna razón, el productId está volviendo como undefined o indefinido. Y no hay control de este error.

Vamos a ir al botón, y verificar que estamos recibiendo bien la información.

<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>

Luego, haremos modificaciones a handleDeleteProduct para el mismo dato.

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);
        }
    }
};

Y por último, haremos el mismo tipo de control en deleteProduct

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);
        }
    }
};
17
  • Producto enviado al eliminar: {_id: '673cdc0ad96a329168af282a', name: 'Producto 1', description: 'Tv', stock: 1, price: 4000} App.jsx:33 handleDeleteProduct: El ID obtenido no es válido. me tira eso en la consola del navegador Commented el 20 nov. a las 17:31
  • Cambia entonces, el console.log del handle, por esto: console.error("handleDeleteProduct: El ID obtenido no es válido: ", productId);
    – Excorpion
    Commented el 20 nov. a las 17:35
  • me sigue tirando el mismo error pero ahora tira al costado undefined Commented el 20 nov. a las 17:40
  • En el boton, en el log, cambia product, por product.id. Hay algo mal en esa sección entonces.
    – Excorpion
    Commented el 20 nov. a las 19:14
  • mmm no pasa nada con ese cambio, tenes una plataforma para comunicarnos mejor y solucionarlo? Commented el 20 nov. a las 20:05

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.