更新Firebase实时数据库时React出现无限循环问题如何解决

1. onValue是Firebase实时数据库的持续监听API，绑定后只要对应路径下的数据发生变更，就会自动触发回调函数。代码中在回调内部执行了update操作修改数据，会反复触发监听回调，形成无限循环。
2. 读写路径不匹配：读取数据使用路径users/${uid}，写入数据使用路径user/${uid}，会导致数据写入到错误节点。

将持续监听的onValue替换为单次读取数据的get方法，同时修正路径问题，可额外增加重复提交判断，避免同一个任务ID被多次添加：

import React, { useState } from 'react';
import { ref, get, update} from "firebase/database";
import { database } from '../../utils/firebase';
import './Card.css';

function Card(props) {
    const [uid, setUID] = useState(props.uid);
    async function completeCard() {
        const userRef = ref(database, 'users/' + uid);
        // 单次读取数据，不会绑定持续监听
        const snapshot = await get(userRef);
        if (!snapshot.exists()) return;
        const data = snapshot.val();
        const completedMissions = data["challenges"] || [];
        // 避免重复添加同一个任务ID
        if (completedMissions.includes(props.cardID)) return;
        
        completedMissions.push(props.cardID);
        const updates = {};
        // 修正写入路径和读取路径保持一致
        updates['/users/' + uid +'/challenges'] = completedMissions;
        await 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;

• 用get方法替代onValue：仅执行一次数据读取，不会绑定持续监听，从根源避免更新数据触发回调的循环问题
• 修正了写入路径的拼写错误，保证读写路径一致
• 增加了任务ID重复判断，避免同一个任务被多次添加到完成列表
• 改为async/await异步写法，逻辑更清晰，也方便后续扩展加载状态、错误提示等逻辑

内容的提问来源于stack exchange，提问作者Lara Calvo