【问题标题】:How to find an unknown Firebase document?如何查找未知的 Firebase 文档?
【发布时间】:2020-10-25 11:20:51
【问题描述】:

我正在使用 HTML 和 Firebase 创建一个朋友/追随者系统。我制作了一个添加新朋友的页面。当我按下“添加朋友”按钮(下图)时,我希望后端找到文件到 li 中的配置文件,但我不知道如何找到确切的文件。您还可以在下面看到我的 Firestore 结构。

Javascript:

firebase.auth().onAuthStateChanged(function(user) {

    db.collection('users').get().then(function(snapshot) {
        console.log(snapshot.docs)
        setupFindFriends(snapshot.docs)
    })

    const findfriends = document.querySelector('.findfriends');

    const setupFindFriends = (data) => {

        let html = '';
        data.forEach(doc => {
            const friend = doc.data();
            const li = `
            <li>
                <div class="name">${friend.Fullname}</div>
                <img class="friendpfp" src="${friend.pfpURL}">
                <button class="addfriend">Add friend</button>
            </li>
            `;
            html += li
        })

        findfriends.innerHTML = html;

    };

});

Firestore 布局

【问题讨论】:

    标签: javascript html firebase google-cloud-firestore


    【解决方案1】:

    您必须将文档 ID 传递给 addFriend() 函数。大致如下(未经测试):

    firebase.auth().onAuthStateChanged(function(user) {
    
        db.collection('users').get().then(function(snapshot) {
            console.log(snapshot.docs)
            setupFindFriends(snapshot.docs)
        })
    
        const findfriends = document.querySelector('.findfriends');
    
        const setupFindFriends = (data) => {
    
            let html = '';
            data.forEach(doc => {
                const friend = doc.data();
                const li = `
                <li>
                    <div class="name">${friend.Fullname}</div>
                    <img class="friendpfp" src="${friend.pfpURL}">
                    <button class="addfriend" onclick="addFriend('${friendId}')">Add friend</button>
                </li>
                `;
                html += li
            })
    
            findfriends.innerHTML = html;
    
        };
    
    });
    
    function addFriend(friendId) {
        console.log(friendId);
     
        // Do something with friendId, e.g. create or update a Firestore doc, etc ... 
    }
    

    【讨论】:

    • 我现在已经尝试过你的答案,但在控制台中出现错误:` Uncaught ReferenceError: HNJr68ZYXJXbA7v9n2jSHscXwSp1 is not defined` HNJr68ZYXJXbA7v9n2jSHscXwSp1 is thefriendId
    • 如果我在 findfriends.innerHTML = html; 之后定义了函数我得到“未定义 addFriend”。如果我在 HTML 中的 标记中定义了该函数,则会出现上述错误。更新后没有变化
    • 好的!我认为它现在起作用了。该函数必须在 HTML 中定义,而不是在 JavaScript 文件中。谢谢!
    • 查看更新。将 addFriend() 函数放在 Auth 侦听器之外。
    猜你喜欢
    • 2022-01-01
    • 2023-03-17
    • 1970-01-01
    • 2019-12-04
    • 2020-09-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多