如何在 React-Firebase 中呈现用户列表

Question

我仍在学习 React，我正在尝试制作一个“设计评论应用”，用户可以在其中注册为客户或设计师并相互互动。 我制作了身份验证系统，并确保每个用户在注册时都会在 firebase 数据库中获得一些属性。 因此，在我的数据库中，我有一个“用户/”路径，每个用户都由 uid 保存。

现在，如果您是客户或设计师，我可以呈现不同的仪表板。 在我的客户仪表板中，我只想呈现设计师列表（然后单击他们转到他们的项目）。 但是，我在尝试让这些东西正常工作时遇到了很多问题！

在下面的代码中，我试图从数据库中获取用户并将他们的 uid 添加到数组中。 稍后我想使用这个数组并使用这些 uid 呈现用户。

import firebase from "firebase/app";
import "firebase/database";

export default function CustomerContent() {
    const[designers, setDesigners] = useState([]);

    function printUsers (){
        var users = firebase.database().ref('/users/');
        users.on('value', (snapshot)=>{
            snapshot.forEach((user)=>{
                console.log(user.key) 
                firebase.database().ref('/users/'+user.key).on('value', (snapshot)=>{
                    var role = snapshot.val().role
                    console.log(role)
                    if(role === 'designer'){
                        const newDesigners = [...designers, user.key];
                        setDesigners(newDesigners);
                    }
                })
            })
        })
    }
    useEffect(() => {
        printUsers();
        console.log(designers);

    }, [])

    return (
        <div>
            designer list
        </div>
    )
}

现在这段代码的问题在于：

1. 看起来它在加载页面时运行了两次 printUsers 函数
2. 数组是空的，但是，如果我将函数链接到一个按钮（只是为了尝试），它似乎只向数组添加了 1 个 uid，并且总是相同的（我不知道发生了什么）。

ps。 console.log(user.key) 和 console.log(role) 打印正确的用户角色组合

Answer 1

这不是一个愚蠢的问题。这是我将其更改为的内容（当然您稍后会删除 console.logs）。如果无法访问您的数据库来运行它，很难知道这是否能完美运行，但根据我上一个 react/firebase 项目，我相信它会起作用。

当您只需要 /users 时，首先要引用 /users/。我不确定这是否会有所不同，但我是按照后一种方式进行的，并且对我有用。

其次，您调用 firebase 的次数超出了您的需要。从第一次开始，您就已经掌握了所需的信息。

第三，这很小，但我不会调用你的函数 printUsers。您所做的不仅仅是打印它们 - 您正在调用 firebase（异步）并设置状态，这比仅将一些数据打印到控制台要大得多。

最后，我会将整个对象存储在您的设计师状态中。谁知道你要展示什么？可能至少是他们的名字，然后可能是他们的位置、背景、图标等。你会希望所有这些都在该数组中可用，并且如果你是应用程序，你可能希望稍后将该数组移动到 redux够大了。

我还在底部添加了一些 JSX，它提供了一个简单的输出，说明您可以使用 Designer 数组为您的应用程序的视觉方面做什么。

import firebase from 'firebase/app';
import 'firebase/database';

export default function CustomerContent() {
    const [designers, setDesigners] = useState([]);

    function printUsers() {
        var users = firebase.database().ref('/users');
        users.on('value', (snapshot) => {
            snapshot.forEach((snap) => {
                const userObject = snap.val();
                console.log(userObject);
                const role = userObject['role'];
                console.log(role);
                if (role === 'designer') {
                    const newDesigners = [...designers, userObject];
                    setDesigners(newDesigners);
                }
            });
        });
    }
    useEffect(() => {
        printUsers();
        console.log(designers);
    }, []);

    return (
        <div>
            <h2>The designer are...</h2>
            <ul>
                {designers.map((designerObject) => {
                    return <li>{designerObject.name}</li>;
                })}
            </ul>
        </div>
    );
}