0
184
Vistas¿Cómo usar una función varias veces en reactjs?
Estoy tratando de crear una sección de cantidad con reactjs pero esto solo funciona para una sección. ¿Cómo puedo hacerlo múltiple?
Cuando hago clic en la flecha hacia arriba, el conteo aumenta igual en todas las {cantidad}. pero necesito cuando haga clic en la flecha hacia arriba, entonces debería contarse según los productos.
Problema: - el conteo viene igual: 
Solución: el conteo no debería ser el mismo, debería ser como se indica a continuación: 
Mi código:-
const BuyProducts = () => { const title = 'Buy Products New'; const classes = productsStyles(); const [qty, setQty] = useState(0); const quantityMinus = () => { if (!qty == 0) { setQty(qty - 1); } }; const quantityPlus = () => { setQty(qty + 1); }; return ( <div> <div> <div onClick={quantityPlus} className="qty-action"> <FontAwesomeIcon icon={faAngleUp} /> </div> <div>{qty}</div> <div onClick={quantityMinus} className="qty-action"> <FontAwesomeIcon icon={faAngleDown} /> </div> </div> <div> <div onClick={quantityPlus} className="qty-action"> <FontAwesomeIcon icon={faAngleUp} /> </div> <div>{qty}</div> <div onClick={quantityMinus} className="qty-action"> <FontAwesomeIcon icon={faAngleDown} /> </div> </div> </div> ); };¡Gracias por tus esfuerzos!
1 Respuestas
Responde la pregunta0
Querrás crear algún tipo de estructura de datos para administrar múltiples cantidades. Como solo está usando una qty de cantidad en este momento, solo una cosa cambiará.
Supongamos que tiene una interfaz CartItem simple para representar algún artículo del carrito de compras que tiene cantidad + un nombre o identificación del artículo que se compra.
(Podría verse así si estuviera usando mecanografiado).
interface CartItem { name: string; quantity: number; } Luego, en React, querrá almacenar una colección de estos CartItem en su estado en algún lugar para que pueda rastrear cuántos objetos necesita renderizar. Puede usar un objeto, un conjunto o simplemente una matriz simple según su caso de uso. Usemos una matriz.
const [cartItems, setCartItems] = useState([{name: 'apple', quantity: 0}, {name: 'orange', quantity: 1}]); // initial data as an example A continuación, sus funciones de cantidad arriba/abajo deben ser un poco más genéricas para que puedan recibir un objeto CartItem como argumento y, en consecuencia, puede usarlo para averiguar qué artículo del carrito actualizar.
const changeQuantity = useCallback((item, quantityChange) => { // Find the item to update const oldCartItems = [...cartItems]; const itemIndex = oldCartItems.findIndex((oldItem) => oldItem.name === item.name); // Change the quantity oldCartItems[itemIndex].quantity += quantityChange; // Put it back in state setCartItems(oldCartItems); }, [cartItems]); Finalmente, en su renderizado/JSX, no necesita seguir escribiendo el mismo JSX una y otra vez. Puede mapear a través del estado cartItems .
return ( <div> {cartItems.map((cartItem) => <div> <div onClick={() => changeQuantity(cartItem, 1)} className="qty-action"> <FontAwesomeIcon icon={faAngleUp} /> </div> <div>{cartItem.quantity}</div> <div onClick={() => changeQuantity(cartItem, -1)} className="qty-action"> <FontAwesomeIcon icon={faAngleDown} /> </div> </div> } </div> );