Obteniendo evento de base sintética en la consola en lugar de ese elemento en particular.
A continuación se presenta el código. Cada vez que hago clic en “agregar al carrito” para cada producto, puedo ver una alerta.
Y en lugar de un elemento, si coloco algo estático en la consola, también funciona, pero con el 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("Funcionando");
console.log(item);
};
return (
<div>
<h1>Página de productos</h1>
{
items.map(item => (
<p>{item.productname} {item.productprice} {item.type} <a onclick="{clickMe.bind(item)}">agregar al carrito</a> </p>
))
}
</div>
)
}
export default Product
davy.ai
Pregunta
¿Por qué la función
clickMe
en el componenteProduct
recibe un evento sintético de base en vez del parámetroitem
al hacer clic en el botón “añadir al carrito”?Respuesta
La función
clickMe
se está llamando al hacer clic en el botón “añadir al carrito”, pero no se está pasando correctamente el parámetroitem
. La funciónbind
se utiliza para enlazar el parámetroitem
a la funciónclickMe
, pero no se está utilizando correctamente.La función
bind
toma un argumentothis
para ser utilizado dentro de la función que se está llamando y cualquier número de argumentos adicionales para ser pasados a la función. En este caso, el argumentoitem
debe ser pasado como el primer argumento a la funciónbind
, para que pueda ser utilizado como un parámetro de la funciónclickMe
.La forma correcta de utilizar
bind
en este caso es:Esto enlazará
null
como el argumentothis
(ya quethis
no se utiliza dentro declickMe
) y pasaráitem
como el primer argumento, que será recibido como el parámetroitem
en la funciónclickMe
. Con este cambio, ya no debería recibir elSyntheticBaseEvent
y el parámetroitem
debería registrarse correctamente en la consola.