He estado trabajando en un proyecto next.js y tengo una parte que actúa como un carrito de compras. Cuando hace clic en un elemento, agrega la imagen del elemento a una lista y muestra todos los elementos seleccionados. Para eliminar el elemento, puede hacer clic en el icono pequeño. Cuando se hace clic en el icono pequeño, empalmo esa lista y actualizo el accesorio, pero no se actualiza hasta que agrego otro elemento. He visto esta pregunta , pero cuando la implemento, da un error. También he leído este artículo , pero tampoco me gusta eso. También publiqué mi proyecto en el código en la caja de arena de código aquí .
var cartImages = []; export default function Home({ data }) { const removeitem = (index) => { cartImages.splice(index, 1); setCartImg(cartImages); }; const [cartImg, setCartImg] = useState(cartImages); return ( <Popup onClick={removeitem} />); }¡Gracias por tu tiempo!
Tus códigos y caja están actualizados. Por favor revise. He comentado parte del código. Básicamente, había dos problemas.
para resolver el primer problema, actualicé la función removeItem para usar y actualizar la variable de estado cartImg .
const removeitem = (index) => { console.log(index); const updated = cartImg.filter((item, idx) => idx !== index); // remove the item based on the index property if (!updated.length) setPopup(false); setCartImg(updated); };también actualizó el accesorio total en el componente Popup
total={cartImg.reduce((partial_sum, a) => partial_sum + a.price, 0)} Para resolver ambos problemas, actualicé el estado cartImg para almacenar la URL y el precio de un artículo en el objeto. Luego sume el total de los artículos en la matriz cartImg .