Tengo un estado local de productos selectedProducts que contiene un número que representa la cantidad de productos que el cliente ha seleccionado, mientras salgo de la pantalla quiero actualizar el número en redux para que pueda verse en el carrito en una pantalla diferente.
pero cada vez que mis productos locales selectedProducts se actualizan, se acumula otra llamada de función antes del evento beforeRemove
Sé que este es un problema de novato, pero he pasado horas tratando de encontrar una solución a este problema y los consejos serían muy útiles :)
useEffect(()=>{ navigation.addListener('beforeRemove', () => { console.log('check this', selectedProducts); if (!selectedProducts) { return; } dispatch(addToCartMultipleQty(selectedProducts)); }); },[selectedProducts])Los productos seleccionados son un estado numérico cuyo valor inicial es nulo y, en un evento de clic de botón, su valor aumenta o disminuye en 1, si su valor anterior es nulo, su valor se establece en 1
Nota: solo quiero actualizar el valor más reciente del estado de los productos seleccionados solo una vez en redux cuando la pantalla está a punto de salir/desmontarse
Puedes probar esto:
useEffect(()=>{ navigation.addListener('beforeRemove', () => { console.log('check this', selectedProducts); if (!selectedProducts) { return; } dispatch(addToCartMultipleQty(selectedProducts)); }); return () => { navigation.removeListener('beforeRemove'); } }, [selectedProducts])Agregue eso a cambio al final de useEffect funcionará como componentWillUnmount en componente funcional
useEffect(() => { return () => { // Anything in here is fired on component unmount. } }, [])Editar: en tu caso
useEffect(() => { console.log('check this', selectedProducts); if (!selectedProducts) { return; } return () => { // Anything in here is fired on component unmount. if (selectedProducts) { dispatch(addToCartMultipleQty(selectedProducts)); } }; }, [selectedProducts]);