A continuación se muestra el código. Cada vez que hago clic en agregar al carrito, para cada artículo. Puedo ver una alerta. Y en lugar de un elemento, si consuelo. registro algo estático, también funciona pero con un elemento. Obtengo un evento base sintético en la consola
function Product() { useEffect (() => { fetchItems(); },[]); const [items, setItems] = useState([]); const fetchItems = async() => { const data = await fetch('/product',{ method: "GET", headers: { Accept: "application/json", "Content-Type": "application/json" }, credentials: "include" }); const items = await data.json(); setItems(items); }; const clickMe = (item) => { alert("Working"); console.log(item); }; return ( <div> <h1>Product Page</h1> { items.map(item => ( <p>{item.productname} {item.productprice} {item.type} <a onClick={clickMe.bind(item)}>add to cart</a> </p> )) } </div> ) } export default ProductAquí .bind no hace lo que crees que hace.
El método bind() crea una nueva función que, cuando se llama, tiene su palabra clave this establecida en el valor proporcionado, con una secuencia dada de argumentos que preceden a los proporcionados cuando se llama a la nueva función.
Con onClick={clickMe.bind(item)} solo está vinculando el item al this de la función y el evento onClick aún se pasa como el primer argumento de la devolución de llamada.
Si desea pasar el item asignado actualmente, debe pasarlo como un argumento adicional.
onClick={clickMe.bind(null, item)}También podría usar una función de devolución de llamada anónima.
onClick={() => clickMe(item)} O declare clickMe como una función curry y devuelva el controlador de clics con el item cerrado en el ámbito de devolución de llamada.
const clickMe = (item) => () => { alert("Working"); console.log(item); }; ... onClick={clickMe(item)}