我希望使用复选框将成员添加到项目中 (Firebase React)

Question

对于学校项目，我希望能够将成员添加到项目中。 通过单击页面上的复选框并创建带有选中复选框的项目，它将获取成员的信息并将它们作为 object 插入到称为成员的表中：

树：

集合（成员）/user.uid/projects/projectID/membres[{memberID, member.name, member.email}]

这是我创建项目的完整组件：

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

const CreerProjets = () => {
    const navigate = useNavigate();
    const ctx = useContext(authContexte);
    const [contact, setContact] = useState([]);
    const [client, setClient] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
    const [newProjet, setNewProjet] = useState({
        description: '',
        nom: '',
        color: '#000000',
        membres: [],
        client: {}
    });
    const [selected, setSelected] = useState([]);

    //Pour recevoir la date actuel (jj/mm/aaaa)
    const current = new Date();
    const showTime = `${current.getDate()}/${current.getMonth() + 1}/${current.getFullYear()}`;

    // Pour reçevoir l'information des membres
    useEffect(() => {
        const unsub = onSnapshot(doc(db, 'membres', ctx.user.uid), (snapshot) => {
            // console.log(snapshot.data());
            setContact({
                ...snapshot.data(),
                id: snapshot.id
            })
            setIsLoading(false);
        });
        return unsub;
    }, []);

    // Pour reçevoir l'information des clients
    useEffect(() => {
        const unsub = onSnapshot(collection(db, 'clients'), (snapshot) => {
            setClient(snapshot.docs.map(doc => {
                return {
                    ...doc.data(),
                    id: doc.id
                };
            }));
        });
        return unsub;
    }, []);

    const updateProjet = (texte, prop) => {
        setNewProjet(current => {
            return {
                ...current,
                [prop]: texte
            };
        });
    };

    const SubmitForm = async (e) => {
        e.preventDefault();

      **  //ERROR IS HERE, THIS IS WHAT I'VE TRIED SO FAR AND I CANNOT GET ANYTHING ELSE BUT THE ID OF THE MEMBER**
        selected.map(id=>{
            return {
                id: id,
                nom: //Name of member with id here
            };
        });
        console.log(selected)


        const projetRef = collection(db, "membres", ctx.user.uid, "projets");

       const resp = await addDoc(projetRef, {
            nom: newProjet.nom,
            description: newProjet.description,
            color: newProjet.color,
            date: "Créé le "+showTime,
            membres: selected,
            clients: newProjet.client
        }, { merge: true });

        console.log(resp.id) // id du projet qui se crée
        console.log(resp)

        navigate('/projets');
    };

    const CheckMembres = async (e) => {
        const { checked, value } = e.currentTarget;
        setSelected(prev => checked ? [...prev, value] : prev.filter(val => val !== value));

    };



    return (
        <section>
            {isLoading ? <Spinner /> : (
                <form style={{ marginTop: 50 + 'px' }} noValidate onSubmit={(e) => SubmitForm(e)}>
                    <div className="">
                        {/* Couleur du Projet */}
                        <div className="input-group mb-3">
                            <span className="input-group-text" id="inputGroup-sizing-default">Couleur du projet</span>
                            <input type="color" onChange={(e) => updateProjet(e.target.value, 'color')} className="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" value={newProjet.color} />
                        </div>

                        {/* Titre du Projet */}
                        <div className="input-group mb-3">
                            <span className="input-group-text" id="inputGroup-sizing-default">Nom du Projet</span>
                            <input type="text" onChange={(e) => updateProjet(e.target.value, 'nom')} className="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" value={newProjet.nom} />
                        </div>

                        {/* Description du Projet */}
                        <div className="mb-3">
                            <label htmlFor="exampleFormControlTextarea1" className="form-label">Description du Projet</label>
                            <textarea onChange={(e) => updateProjet(e.target.value, 'description')} className="form-control" id="exampleFormControlTextarea1" rows="3" value={newProjet.description}></textarea>
                        </div>
                    </div>

                    <div className="formDroit">

                        {/* Pour les membres */}

                        <div className="checkboxMembres">
                        <p>Contacts:</p>
                       {contact.contacts.map((membre)=>(
                        <div className="form-check form-switch" key={membre.nom + membre.email}>
                            <input className="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" onChange={(e)=>CheckMembres(e)} value={membre.id} checked={selected.some(val => val === membre.id)}/>
                            <label className="form-check-label" htmlFor="flexSwitchCheckDefault">{membre.nom}</label>
                        </div>  
                       ))}
                    </div>

                        {/* Pour les clients */}

                        {/* <div className="selectClient">
                        <label className="form-check-label" htmlFor="flexSwitchCheckDefault">Ajouter un Client</label>
                        <select className="form-select form-select-sm" aria-label=".form-select-sm example">
                            <option defaultValue>Pas de Client</option>
                            <option value="1">Client1</option>
                            <option value="1">Client2</option>
                            <option value="1">Client3</option>
                        </select>
                    </div> */}

                    </div>
                    <button className="btn btn-primary btnProjet" type="submit">Créer votre projet!</button>
                </form>)}
        </section>
    );
};
export default CreerProjets;

Answer 1

在经历了很多痛苦之后，我设法得到了它：对于任何想要这里答案的人来说，它是：

const SubmitForm = async (e) => {
    e.preventDefault();

    const Membre = contact.contacts.filter((user)=>selected.includes(user.id));

    const projetRef = collection(db, "membres", ctx.user.uid, "projets");

    const Projet = await addDoc(projetRef, {
        nom: newProjet.nom,
        description: newProjet.description,
        color: newProjet.color,
        date: "Créé le "+showTime,
        membres: Membre,
        clients: newProjet.client
    }, { merge: true });

    console.log(Projet.id) // id du projet qui se crée

    console.log(Membre);
    

    navigate('/projets');
};