No sé por qué mi aplicación de reacción se retrasa después de hacer clic en el botón Agregar al carrito. Se necesitan varios clics para agregar un producto al carrito.
Los siguientes son el archivo app.js y el archivo products.jsx donde se consumen los contextos. La lógica funciona muy bien, pero el único problema es el retraso después de hacer clic en el botón Agregar al carrito. Aquí está el enlace para codesandbox para que pueda tener una idea clara sobre mi problema
haga clic aquí para acceder a los códigos y la caja de mi aplicación de reacción
No hay retraso. El problema es que dentro de Product.jsx, onClick está dentro del span en lugar del button y el span no ocupa todo el botón. Cuando hace clic en el button (la parte exterior a la que no llega el span ), no se llama a ninguna función. Pero en caso de que haga clic en la parte interna, se llama el onClick del span .
tldr; mueva el onClick del lapso al botón.
<button className="product-add-button" onClick={() => handleAddProduct(productItems)}> {" "} <span> {" "} <FaShoppingCart color="green" fontSize="25px" className="but-cart" />{" "} Add to cart </span> </button>