javascript - React 在更新实时数据库时运行无限循环

Question

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;

嗨，当我尝试更新 firebase 实时数据库中的值时，它导致无限循环!我认为 onValue 可能会导致问题，但我不知道如何解决它。我希望按下按钮时只更新一次值，因为它只应该更改一次，提前谢谢您!

Answer 1

onValue 设置一个监听器，每次数据库的该部分发生更改时，该监听器都会重复回调您。因此它第一次获取数据并运行您的代码。您的代码更新了数据库，因此回调再次发生，这导致您再次更新数据库。重复。

如果您只想获取一次值，请使用 get 代替:

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);
  });
}

或者使用异步/等待:

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);
}