Estoy escribiendo una aplicación React. Usé dos useEffects . Un useEffects obtiene datos de firebase y cambia "cartItems" y "totalAmount".
El segundo useEffect tiene estas dos dependencias y se ejecuta cuando estas dependencias cambian y sobrescribe el modelo de datos.
Creo que hace un bucle sin sentido (podría estar equivocado). ¿Cómo puedo solucionarlo y hacerlo eficiente? Me gustaría transformarme en Redux Toolkit Actions, pero primero me gustaría hacerlo en Vanilla React.
useEffect(() => { fetch('https://italianhouse-1aef0-default-rtdb.europe-west1.firebasedatabase.app/cart.json') .then(res => res.json()) .then(data => { console.log(data) const keys = Object.keys(data.cartItems) keys.forEach(key => dispatch(cartActions.getCartData(data.cartItems[key]))) dispatch(cartActions.setFetchedTotalAmount(data.totalAmount)) }) }, [dispatch]) useEffect(() => { fetch('https://italianhouse-1aef0-default-rtdb.europe-west1.firebasedatabase.app/cart.json', { method: 'PUT', body: JSON.stringify({cartItems: cartItems, totalAmount: totalAmount}), headers: { 'content-type': 'application/json' } }) }, [cartItems, totalAmount])Parece que tu primer efecto de uso te empuja al bucle.
Pasar una matriz vacía como segundo argumento para useEffect, lo que hace que solo se ejecute en el montaje y desmontaje.
usarEfecto(() => { ... }, []);
Lo he resuelto usando booleanos adicionales
let isInitial = true useEffect(() => { fetch('https://italianhouse-1aef0-default-rtdb.europe-west1.firebasedatabase.app/cart.json') .then(res => res.json()) .then(data => { const keys = Object.keys(data.cartItems) keys.forEach(key => loadedMeals.push(data.cartItems[key]) ) dispatch(cartActions.replaceCart(loadedMeals)) dispatch(cartActions.setFetchedTotalAmount(data.totalAmount)) isInitial = false }) }, [dispatch]) useEffect(() => { if (isInitial) return fetch('https://italianhouse-1aef0-default-rtdb.europe-west1.firebasedatabase.app/cart.json', { method: 'PUT', body: JSON.stringify({cartItems: cartItems, totalAmount: totalAmount}), headers: { 'content-type': 'application/json' } }) }, [cartItems, totalAmount])