es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Obteniendo evento de base sintética en la consola en lugar de ese elemento en particular.

Obteniendo evento de base sintética en la consola en lugar de ese elemento en particular.

01 Jun, 2023 Programación

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
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Pregunta

    ¿Por qué la función clickMe en el componente Product recibe un evento sintético de base en vez del parámetro item 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ámetro item. La función bind se utiliza para enlazar el parámetro item a la función clickMe, pero no se está utilizando correctamente.

    La función bind toma un argumento this 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 argumento item debe ser pasado como el primer argumento a la función bind, para que pueda ser utilizado como un parámetro de la función clickMe.

    La forma correcta de utilizar bind en este caso es:

    <a onclick="{clickMe.bind(null," item)}="">añadir al carrito</a>

    Esto enlazará null como el argumento this (ya que this no se utiliza dentro de clickMe) y pasará item como el primer argumento, que será recibido como el parámetro item en la función clickMe. Con este cambio, ya no debería recibir el SyntheticBaseEvent y el parámetro item debería registrarse correctamente en la consola.

Comments are closed.