如何显示每个成员拥有的项目数量?FIREBASE REACT

8zzbczxx  于 2022-11-17  发布在  React
关注(0)|答案(2)|浏览(171)

这是我的班级项目,一旦用户登录并点击成员页面,我希望他们能看到所有其他成员谁之前登录的列表,并显示他们每个人有多少个项目,项目的长度为... a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a

此页面为:

这是我的火力数据:

真的谢谢大家!
这是我在Membres.js文件中的代码

import { useState, useContext, useEffect } from "react";
import { onSnapshot, collection, addDoc } from 'firebase/firestore';
import { db } from '../../config/firebase';
import { authContexte } from "../../Contexte/authContexte";
import { Link } from "react-router-dom";

const Membres = () =>{
    const ctx = useContext(authContexte);
    const [membres, setMembres] = useState([]);
    
    useEffect(() => {
        const unsub = onSnapshot(collection(db, 'membres'), (snapshot) => {
            setMembres(snapshot.docs.map(doc => {
                return {
                    ...doc.data(),
                    id: doc.id
                };
            }));
        });
        return unsub;
    }, []);
 return(
    <ul className="list-group">
        {membres.map((membre)=>(
            <li className="list-group-item d-flex justify-content-between align-items-center" key={membre.nom + membre.email}>
                {membre.nom} <p>{membre.email}</p>
                <span className="badges">{membre.projets.length}</span> //Need this to work
                {console.log(membre.projets)}
            </li>
        ))}
    </ul>
 );
};
export default Membres;
fnvucqvd

fnvucqvd1#

试试这个

const Membres = () =>{
    const ctx = useContext(authContexte);
    const [membres, setMembres] = useState([]);
    
    useEffect(() => {
        const unsub = onSnapshot(collection(db, 'membres'), (snapshot) => {
            setMembres(snapshot.docs.map(doc => {
                return {
                    ...doc.data(),
                    id: doc.id
                };
            }));
        });
        return unsub;
    }, []);
 return(
    <ul className="list-group">
        {membres.map((membre)=>(
            <li className="list-group-item d-flex justify-content-between align-items-center" key={membre.nom + membre.email}>
                {membre.nom} <p>{membre.email}</p>
                <span className="badges">{membre.projets ? membre.projets.length : '0'}</span> //Need this to work
            </li>
        ))}
    </ul>
 );
};
export default Membres;
nhaq1z21

nhaq1z212#

你的projects是一个map字段,而不是数组,并且map没有长度。
你可以把map的键放入一个数组中,然后把它的长度用:

Object.keys(membre.projets).length

相关问题