import React, { useState } from 'react'; import { ref, onValue, update} from "firebase/database"; import { database } from '../../utils/firebase'; import './Card.css'; function Card(props) { const [uid, setUID] = useState(props.uid); function completeCard() { const userRef = ref(database, 'users/' + uid); onValue(userRef, (snapshot) => { const data = snapshot.val(); var completedMissions = data["challenges"]; completedMissions.push(props.cardID); const updates = {}; updates['/user/' + uid +'/challenges'] = completedMissions; //This is the line causing the infinite loop update(ref(database), updates); }); } return( <div className="card"> <h1>{props.name}</h1> <p>{props.description}</p> <button onClick={completeCard}>Complete</button> <button>+Info</button> </div> ) } export default Card;Hola, cuando intento actualizar el valor en la base de datos en tiempo real de Firebase, ¡provoca un bucle infinito! Creo que onValue puede estar causando el problema, pero no sé cómo solucionarlo. Me gustaría que cuando se presione el botón solo se actualice el valor una vez, ya que solo debe cambiar una vez, ¡gracias de antemano!
onValue configura un oyente que le devolverá la llamada repetidamente, cada vez que cambie esa parte de la base de datos. Entonces obtiene datos por primera vez y ejecuta su código. Su código actualiza la base de datos, por lo que la devolución de llamada ocurre nuevamente, lo que hace que actualice la base de datos nuevamente. Repetir.
Si solo desea obtener el valor una vez, use get en su lugar:
import { ref, get, update } from "firebase/database"; //... function completeCard() { const userRef = ref(database, "users/" + uid); get(userRef).then((snapshot) => { const data = snapshot.val(); const completedMissions = data["challenges"]; completedMissions.push(props.cardID); const updates = {}; updates["/user/" + uid + "/challenges"] = completedMissions; update(ref(database), updates); }); }O con async/await:
async function completeCard() { const userRef = ref(database, "users/" + uid); const snapshot = await get(userRef); const data = snapshot.val(); const completedMissions = data["challenges"]; completedMissions.push(props.cardID); const updates = {}; updates["/user/" + uid + "/challenges"] = completedMissions; update(ref(database), updates); }