Firebase React项目中通过复选框添加成员的实现问题

核心问题 #

当前selected数组仅存储成员ID，无法满足存入完整成员对象（memberID/name/email）的需求，可通过两种方式修复：

方法一：选择时直接存储成员对象（推荐） #

直接在复选框选择时，将包含所需字段的对象存入selected数组，避免提交时的额外匹配操作：

1. 调整复选框的onChange逻辑，传入完整成员对象：

const CheckMembres = (membre) => {
  setSelected(prev => {
    const isAlreadySelected = prev.some(item => item.id === membre.id);
    if (isAlreadySelected) {
      // 移除已选中的成员
      return prev.filter(item => item.id !== membre.id);
    } else {
      // 添加仅包含所需字段的对象
      return [...prev, {
        id: membre.id,
        nom: membre.nom,
        email: membre.email
      }];
    }
  });
};

2. 更新页面中的复选框元素：

{contact.contacts.map((membre)=>(
  <div className="form-check form-switch" key={membre.id}>
    <input 
      className="form-check-input" 
      type="checkbox" 
      role="switch" 
      id={`member-checkbox-${membre.id}`}
      onChange={()=>CheckMembres(membre)}
      checked={selected.some(item => item.id === membre.id)}
    />
    <label className="form-check-label" htmlFor={`member-checkbox-${membre.id}`}>{membre.nom}</label>
  </div>  
))}

3. 提交表单时直接使用selected数组：

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

  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 });

  navigate('/projets');
};

方法二：提交时根据ID匹配完整信息 #

如果不想修改选择逻辑，可在提交时从contact.contacts中筛选出选中成员的完整信息：

修改SubmitForm函数：

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

  // 根据选中的ID，从contact.contacts中提取完整成员对象
  const selectedMembres = contact.contacts
    .filter(membre => selected.includes(membre.id))
    .map(membre => ({
      id: membre.id,
      nom: membre.nom,
      email: membre.email
    }));

  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: selectedMembres, // 替换为处理后的对象数组
    clients: newProjet.client
  }, { merge: true });

  navigate('/projets');
};

注意事项 #

• 确保Firestore中membres文档下的contacts数组包含id、nom、email三个字段，否则需检查数据结构是否符合预期。
• 方法一性能更优，无需在提交时额外遍历筛选数据。

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