Estoy aprendiendo React JS. Estoy haciendo un proyecto de demostración donde tengo un botón de descarte para restablecer los valores de estado. He implementado la función y me parece bien pero no funciona.
Estoy pasando la función handleResetCart a través del componente <Cart /> .
Aplicación.js
function App() { const [totalPrice, setTotalPrice] = useState([]); const [totalItems, setTotalItems] = useState([]); const handleCart = course => { const newItems = [...totalItems, course]; setTotalItems(newItems); const newPrice = [...totalPrice, course.price]; setTotalPrice(newPrice); }; const handleResetCart = () => { setTotalPrice([]); setTotalItems([]); } return ( <div className="app"> <Navbar /> <div className="container"> <div className="row"> <div className="courses col-9"> {data.map(course => ( <Course key={course.id} course={course} handleCart={handleCart} /> ))} </div> <div className="cart col-3"> <Cart totalPrice={totalPrice} totalItems={totalItems} handleResetCart={handleResetCart} /> </div> </div> </div> </div> ); } Estoy llamando a la función handleCarReset a través del botón Discard .
Carrito.jsx
import React from 'react'; const Cart = props => { const { totalPrice } = props; const { totalItems } = props; const price = totalPrice.reduce((t1, t2) => t1 + t2, 0).toFixed(2); return ( <div className="card"> <div className="card-body"> <h5 className="card-title text-center"> CART <i className="bi bi-cart-plus-fill"></i> </h5> <hr /> <p>Courses Added: {totalItems.length}</p> <p>Total Price: ${price}</p> <hr /> <div className="d-flex justify-content-between"> <button className="btn btn-outline-danger btn-sm" onClick={() => props.handleResetCart}> Discard </button> <button className="btn btn-outline-success btn-sm">Buy Now</button> </div> </div> </div> ); }; export default Cart;¿Dónde está el problema? ¿Cómo resolver esto?
Parece que en el componente de su carrito, está devolviendo una referencia de la función handleResetCard cuando ocurre el evento onClick. En su lugar, debe invocar la función handleResetCard.
Arreglar el botón enHaga clic como a continuación
// cart.jsx <button className="btn btn-outline-danger btn-sm" onClick={() => props.handleResetCart()}> Discard </button>o más concisamente sin crear una función de flecha
// cart.jsx <button className="btn btn-outline-danger btn-sm" onClick={props.handleResetCart}> Discard </button>Puedes usarlo
onClick={() => props.handleResetCart()}>